Angular2 removing duplicates from an JSON array
35,871
Solution 1
I have a solution for this problem :)
Array.from(new Set([{"app":"database_1",
"host":"my_host1",
"ip":"00.000.00.000"
},
{"app":"database_1",
"host":"my_host1",
"ip":"00.000.00.000"
},
{"app":"database_2",
"host":"my_host2",
"ip":"00.000.00.000"
},
{"app":"database_2",
"host":"my_host2",
"ip":"00.000.00.000"
}].map((itemInArray) => itemInArray.app)))
Thanks all for help :)
Solution 2
Mybe it can help you
myList = ["One","two","One","tree"];
myNewList = Array.from(new Set(myList ));
Solution 3
You could use following method:
names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
ngOnInit() {
let filteredNames=this.remove_duplicates(this.names);
console.log(filteredNames);
console.log(this.names);
}
remove_duplicates(arr) {
let obj = {};
for (let i = 0; i < arr.length; i++) {
obj[arr[i]] = true;
}
arr = [];
for (let key in obj) {
arr.push(key);
}
return arr;
}
Hope this helps.
Solution 4
You could use Observable approach as well, It is very simple.
let filteredData = [];
let arrayData = [{
"app": "database_1",
"host": "my_host1",
"ip": "00.000.00.000"
},
{
"app": "database_1",
"host": "my_host1",
"ip": "00.000.00.000"
},
{
"app": "database_2",
"host": "my_host2",
"ip": "00.000.00.000"
},
{
"app": "database_2",
"host": "my_host2",
"ip": "00.000.00.000"
}];
Observable.merge(arrayData)
.distinct((x) => x.app)
.subscribe(y => {
filteredData.push(y)
console.log(filteredData)
});
Solution 5
You will need trackBy.
Try with:
*ngFor="#appsUnique of posts;trackBy:appsUnique?.app"
Hope it helps.
Author by
notsaltydev
Updated on May 21, 2020Comments
-
notsaltydev almost 4 years
I have a problem with filter in my JSON array when I move my app to Angular2 . In Angular 1.x that was easier. I used
'unique'
in filter and this remove all duplicates.apps:
{"app":"database_1", "host":"my_host1", "ip":"00.000.00.000" }, {"app":"database_1", "host":"my_host1", "ip":"00.000.00.000" }, {"app":"database_2", "host":"my_host2", "ip":"00.000.00.000" }, {"app":"database_2", "host":"my_host2", "ip":"00.000.00.000" }
Part of html code:
<div *ngFor='#appsUnique of apps '> <div class="row dashboard-row"> <div class="col-md-2"> <h4>{{appsUnique.app }}</h4> </div> </div> </div>
And result is:
database_1 database_1 database_2 database_2
I want to get result:
database_1 database_2
How can I remove duplicates from an array?
-
Gopinath Shiva over 7 yearsI tried using trackBy, but couldn't achieve it. can u experiment here fiddle.jshell.net/1y0tw6zf/53
-
alejandromav over 7 yearstrackBy was added in beta 3. Maybe you're using a previous version. tweet
-
notsaltydev over 7 yearsI have angular2-2.0.0-beta.15 and when i use your code (
*ngFor="#appsUnique of apps;trackBy:appsUnique?.app
), result is the same of at the beginnig. -
alejandromav over 7 yearsYou can see more deatils here
-
Nishant Singh about 6 yearsI too wanted to get unique objects from an array of objects by comparing a particular object variable. I tried all solutions available but only this one worked for me. Thanks.