web-dev-qa-db-fra.com

Angular2 supprimant les doublons d'un tableau JSON

J'ai un problème avec le filtre dans mon tableau JSON lorsque je déplace mon application vers Angular2. Dans Angular 1.x c'était plus facile. J'ai utilisé 'unique' dans le filtre et cela supprime tous les doublons.

applications:

{"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"
}

Partie du code html:

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

Et le résultat est:

database_1
database_1
database_2
database_2

Je veux obtenir un résultat:

database_1
database_2

Comment supprimer les doublons d'un tableau?

arraysangularjsfilterangularngfor
8
notsaltydev

J'ai une solution à ce problème :)

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

En savoir plus sur Array.from & Set

Merci à tous pour votre aide :)

6
notsaltydev

Peut-être que cela peut vous aider

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

myNewList =  Array.from(new Set(myList ));
11
ABDERRAHIME FARHANE

Vous pouvez utiliser la méthode suivante:

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

J'espère que cela t'aides.

3
Bhushan Gadekar

Vous pouvez également utiliser l'approche Observable, c'est très 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)
  });
2
Dimuthu

au lieu de boucler sur le tableau json normal, vous pouvez créer un autre tableau dans votre classe TypeScript correspondante et le modifier comme bon vous semble. Dans votre html, vous pouvez alors avoir les éléments suivants

html

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

Ensuite, vous avez besoin de ce tableau filtréApps dans votre classe TypeScript correspondante.

Manuscrit

 let filteredApps = [];

et dans une fonction, vous pouvez ensuite créer ces applications filtrées, par exemple dans la méthode onInit.

onInit()
{
    filteredApps = // filter logic
}
1
Dylan Meeus

Vous aurez besoin de trackBy .

Essayez avec:

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

J'espère que cela aide.

1
alejandromav