Avoid displaying duplicate values when using Ng-repeat in Angular JS

I'm in search of a method to prevent the display of duplicate values when using ng-repeat with Angular JS.

Here is an example of my JSON list:

[
{
"Country":"Algeria",
"Value":"200"
},
{
"Country":"France",
"Value":"300"
},
{
"Country":"France",
"Value":"600"
},
]

Below is my JavaScript code for displaying countries:

<a class="item" href="#" ng-repeat="item in items">
    {{ list.country }}
  </a>

Is there a way to utilize ng-if or any conditional code to avoid showing duplicate items?

In this case, I would like to only display: Algeria and France.

javascriptjsonangularjs

Answer №1

To ensure accurate data in your template, it's best to clean the data before templating. This is especially important if you want the total value for France to be 900 by adding the two duplicates together.

If you only want to display one of the duplicate values, you can utilize a unique function like: https://lodash.com/docs#uniq

Alternatively, using native JavaScript:

In your JavaScript:

var values = [ {
    "Country": "Algeria",
    "Value": "200"
}, {
    "Country": "France",
    "Value": "300"
}, {
    "Country": "France",
    "Value": "600"
} ];

function onlyUnique( value, index, self ) {
    return self.indexOf( value ) === index;
}

var uniqueValues = values.filter( onlyUnique );

In your template:

<a class="item" href="#" ng-repeat="value in uniqueValues">
    {{ value.country }}
</a>

If you prefer to handle this directly in the template, you can check if the current iteration index matches the item index in the array:

<a class="item" href="#" ng-repeat="item in items" ng-if="$index === items.indexOf(item)">
    {{ list.country }}
</a>

Answer №2

If you're looking to achieve this, check out the following link: http://angular-ui.github.io/ui-utils/

<a class="element" href="#" ng-repeat="item in items | distinct:'country'">
    {{ list.country }}
  </a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for positioning dynamic high charts in a bootstrap row

I have implemented HighCharts for displaying charts on my website. Specifically, I am utilizing the chart type solidgauge. The charts are dynamic and I am looking to arrange them horizontally across the page. My goal is to align the charts in a layout sim ...

javascripthtmlcsshighcharts

Utilizing jQuery to correspond with CSS media queries

Continuing from my previous question about an automatic jQuery image slider, you can refer to it here. I have made some changes in my CSS using media queries and I am trying to incorporate them into my JavaScript code using an 'if / else if' sta ...

javascriptjqueryhtmlcss

Avoid changing the orientation

Despite having a similar title, my question is not a duplicate of Prevent orientation change in iOS Safari. I have modified the code provided below. I have written the following code to automatically rotate the content when a user rotates their iPad/iPhon ...

javascripthtmlcsssmartphone

Add to an array the recently created span element which was inputted through text in AngularJS

Having some difficulty controlling an array object with a list of span values using a watcher in Angularjs. The current setup works partially - when I input span elements, an array is automatically created for each span. When I remove a span element, the ...

javascriptjqueryangularjs

Consistently encountering the message 'Error: timeout of 2000ms exceeded' while using Selenium

Good morning, Currently, I am in the process of learning how to use Selenium with JavaScript (specifically using Mocha). I have created a very basic test that is causing some issues during runtime. Whenever I run the test, a new instance of Chrome opens a ...

javascriptseleniummocha.js

Explore a JSON document containing a hierarchy of dictionaries

Here is an illustration to consider: { "items": { "PYGXGE": { "id": "a", "number": "1" }, "sbe7oa": { "id": "b", ...

pythonjsondictionary

Looking to update the URL from another component?

My current project is using Angular 6 and I am working on creating a list of buttons on the left panel such as "Ice cream", "Pop corns", and more. The goal is for users to click on these buttons which will then change the URL of the add button located in t ...

javascriptangular

combine two lists in an object based on certain conditions

Hello skilled jq users! I am currently learning jq and working with a json object that contains lists like the ones below: { "image_files": [ { "id": "img_0001", "width": 32, "height": 32, "file_name": "img_0001.png" }, ...

jsonjq

What is more efficient for caching database entries: using a JSON file or another method?

I have a variety of data stored in my database that remains constant even when the site is refreshed. This includes settings for the main homepage such as: Title of the page Home URL PayPal address Email address etc. I currently have a class named "Home ...

phpmysqljsoncachingmemcached

Using JavaScript to Parse JSON with Carriage Returns and Line Breaks

Utilizing the script below in JavaScript, I am able to extract a JSON string from a different JS file: // code to retrieve JSON data from another JS module var jsonMatch = data.match( /\/\*JSON\[\*\/([\s\S]*?)\/&bso ...

javascriptjqueryjsonparsing

What is the process for updating button text upon clicking in Angular?

To toggle the text based on whether this.isDisabled is set to false or true, you can implement a function that changes it when the button is clicked. I attempted to use this.btn.value, but encountered an error. import { Component } from '@angular/core ...

javascriptcssangular

Tips for Modifying the currentUrl identifier in Angular 2

I am trying to change the ID property of my currentUrl object within my component. My goal is for the ID to update and then fetch the corresponding data based on that ID. However, I keep encountering this error message: "Cannot assign to read only propert ...

javascriptangulartypescript

Using Node.js to generate PDF documents and send them directly to the response stream

I am currently utilizing PDFKit, a PDF generation library for Node.js, which can be found at pdfkit.org. My goal is to send a PDF as a response to a client. # Save the PDF file to the disk doc.write('output.pdf'); The code provided above saves ...

javascriptnode.jspdf-generation

What is the best way to add 1 to a number every second with javascript?

My code seems to be functioning correctly, but I'm having trouble setting the delay and stopping the increment after a certain interval. Can someone please assist me with this? Javascript: $(document).ready(function() { var number = parseInt($(& ...

javascripthtml

Tiny adjustment to jQuery Collapsible Panel

I have successfully implemented a jQuery Accordion in my demo. When I click on 'About Us', it reveals the 'Team' link below. Exciting! Now, I am wondering if it is possible for this Accordion to function without needing the 'item& ...

javascriptjqueryaccordion

Explore the JSON file to locate a legitimate IP address and extract it

I'm trying to extract an IP address from a JSON file I have received. Is it possible to simply remove everything else and grab the IP address directly? What would be the most effective method for extracting this string? Code: if data['secret&ap ...

jsonpython-3.x

Struggling to create a <td> with AngularJS directive

I am currently working on creating a directive for a large set of repeated HTML code that involves using tables and table data cells. Although I have experience creating directives for div elements in the past, this is my first attempt at incorporating the ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Accessing information stored in an array using JSON

In my PHP script, I am trying to decode a JSON string from a specific URL: $jsonurlpers = "https://api.openarch.nl/1.1/records/show.json?archive=nha&identifier=8554bfba-9fd9-4ca2-876c-feb7da095d6c"; $jsondatapers = file_get_contents($jsonurlpers); Aft ...

phparraysjsondecode

Removing CSS styles using jQuery when the page loads

Check out this jsFiddle before I ask my question: http://jsfiddle.net/AxGHA/3/ I am looking for a way to remove the float: left; styling from the H2 and P tags if there is no image in the div using jQuery. Any suggestions on how to achieve this? Apprecia ...

javascriptjqueryhtmlcssappend

"Uncaught Error: Unable to retrieve null properties" encountered while utilizing regex match in cheerio web scraping

Extracting text from brackets in HTML using regex: <dl class="ooa-1o0axny ev7e6t84"> <dd class="ooa-16w655c ev7e6t83"> <p class="ooa-gmxnzj">Cekcyn (Kujawsko-pomorskie)</p> </dd> <dd class="ooa-16w655c ev7e6t ...

javascriptnode.jsregexcheerio