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
– pramod kadam, Commented Jul 21, 2016 at 11:28
Thanks for reply, I found similar topic: stackoverflow.com/questions/34417250/… — notsaltydev
– notsaltydev, Commented Jul 21, 2016 at 11:35

ABDERRAHIME FARHANE · Accepted Answer · 2017-10-02 13:35:35Z

11

Mybe it can help you

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

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

answered Oct 2, 2017 at 13:35

ABDERRAHIME FARHANE

1582 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

notsaltydev · Accepted Answer · 2016-07-27 16:24:50Z

6

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

edited Jul 27, 2016 at 16:24

answered Jul 22, 2016 at 9:15

notsaltydev

1652 gold badges3 silver badges12 bronze badges

Comments

Bhushan Gadekar · Accepted Answer · 2016-07-21 11:01:51Z

4

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.

answered Jul 21, 2016 at 11:01

Bhushan Gadekar

13.8k21 gold badges89 silver badges133 bronze badges

Comments

Dimuthu · Accepted Answer · 2017-12-24 03:38:32Z

2

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

answered Dec 24, 2017 at 3:38

Dimuthu

1,6811 gold badge14 silver badges16 bronze badges

1 Comment

Nishant Singh Over a year ago

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.

Dylan Meeus · Accepted Answer · 2016-07-21 10:53:52Z

1

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
}

answered Jul 21, 2016 at 10:53

Dylan Meeus

5,8303 gold badges33 silver badges49 bronze badges

Comments

alejandromav · Accepted Answer · 2016-07-21 10:55:36Z

1

You will need trackBy.

Try with:

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

Hope it helps.

answered Jul 21, 2016 at 10:55

alejandromav

9631 gold badge11 silver badges26 bronze badges

4 Comments

Gopinath Shiva Over a year ago

I tried using trackBy, but couldn't achieve it. can u experiment here fiddle.jshell.net/1y0tw6zf/53

alejandromav Over a year ago

trackBy was added in beta 3. Maybe you're using a previous version. tweet

notsaltydev Over a year ago

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.

alejandromav Over a year ago

You can see more deatils here

Collectives™ on Stack Overflow

Angular2 removing duplicates from an JSON array

6 Answers 6

Comments

Comments

Comments

1 Comment

html

typescript

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

html

typescript

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related