Angular2 removing duplicates from an JSON array

Question

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?

As in angular2 filters replaced by pipes and some filters not available in angular2. you can write custom @Pipe to filter array. and for array processing lodash js is also helpfull. — pramod kadam, Jul 21 '16 at 11:28
Thanks for reply, I found similar topic: http://stackoverflow.com/questions/34417250/filtering-an-array-in-angular2 — notsaltydev, Jul 21 '16 at 11:35

score 11 · Answer 1 · answered Oct 02 '17 at 13:35

11

Mybe it can help you

myList = ["One","two","One","tree"];

myNewList =  Array.from(new Set(myList ));

answered Oct 02 '17 at 13:35

ABDERRAHIME FARHANE

158
2
7

notsaltydev · Accepted Answer · 2016-07-27T16:24:50.117

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)))

More about Array.from & Set

Thanks all for help :)

score 4 · Answer 3 · answered Jul 21 '16 at 11:01

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.

score 2 · Answer 4 · answered Dec 24 '17 at 03:38

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)
  });

I 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. — Nishant Singh, Feb 21 '18 at 09:06

score 1 · Answer 5 · answered Jul 21 '16 at 10:53

instead of looping over the normal json array, you can create another array in your corresponding typescript class, and alter this as you see fit. In your html, you can then have the following

html

 <div *ngFor='let appsUnique of filteredApps'>
    <div class="row dashboard-row">
        <div class="col-md-2">
           <h4>{{appsUnique.app }}</h4>
        </div>
    </div>
</div>

Next, you need this filteredApps array in your corresponding typescript class.

typescript

 let filteredApps = [];

and in a function you can then create that filteredApps, for example in the onInit method.

onInit()
{
    filteredApps = // filter logic
}

score 1 · Answer 6 · answered Jul 21 '16 at 10:55

1

You will need trackBy.

Try with:

*ngFor="#appsUnique of posts;trackBy:appsUnique?.app"

Hope it helps.

answered Jul 21 '16 at 10:55

alejandromav

933
1
11
24

I tried using trackBy, but couldn't achieve it. can u experiment here https://fiddle.jshell.net/1y0tw6zf/53/ – Gopinath Shiva Jul 21 '16 at 11:00
trackBy was added in beta 3. Maybe you're using a previous version. [tweet](https://twitter.com/angularjs/status/694963587157131264) – alejandromav Jul 21 '16 at 11:37
I 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. – notsaltydev Jul 21 '16 at 11:58
You can see more deatils [here](http://angularjs.blogspot.co.at/2016/04/5-rookie-mistakes-to-avoid-with-angular.html) – alejandromav Jul 21 '16 at 12:02

Angular2 removing duplicates from an JSON array

6 Answers6

html

typescript

Linked