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

More about Array.from & Set

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.

Share:
35,871
notsaltydev
Author by

notsaltydev

Updated on May 21, 2020

Comments

  • notsaltydev
    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
    Gopinath Shiva over 7 years
    I tried using trackBy, but couldn't achieve it. can u experiment here fiddle.jshell.net/1y0tw6zf/53
  • alejandromav
    alejandromav over 7 years
    trackBy was added in beta 3. Maybe you're using a previous version. tweet
  • notsaltydev
    notsaltydev over 7 years
    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
    alejandromav over 7 years
    You can see more deatils here
  • Nishant Singh
    Nishant Singh about 6 years
    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.