fusionner deux tableaux d'objets avec Angular 2 et TypeScript ?

Question

J'ai parcouru les questions sur JavaScript à ce sujet, cette question concerne spécifiquement Angular2 avec TypeScript.

Ce que j'essaie de faire est de concaténer les objets json dans un tableau.

Mon code ressemble à quelque chose comme ceci,

public results: [];

public getResults(){
    this._service.get_search_results(this._slug, this._next).subscribe(
            data => {
                this.results.concat(data.results);
                this._next = data.next;
            },
            err => {
                console.log(err);
            }
        );
}

Comment puis-je concaténer data.results à this.results avec typescript et angular ?

this._slug et this._next sont fixés sur la classe.

Merci.

Answer 1

Le site opérateur de diffusion est plutôt cool.

this.results = [ ...this.results, ...data.results];

---

L'opérateur d'étalement vous permet de placer facilement une version étendue d'un tableau dans un autre tableau.

Vous pouvez lire l'article sur l'opérateur d'écart ici.

Answer 2

Je pense que vous devriez plutôt utiliser ce qui suit :

data => {
  this.results = this.results.concat(data.results);
  this._next = data.next;
},

De la concat doc :

La méthode concat() renvoie un nouveau tableau composé du tableau sur lequel elle est appelée et du ou des tableaux et/ou valeurs fournis comme arguments.

Answer 3

Avec un angle de 6 opérateur de diffusion et concat ne fonctionne pas. Vous pouvez le résoudre facilement :

result.push(...data);

Answer 4

Supposons que j'ai deux tableaux. Le premier contient les détails de l'étudiant et le détails sur les notes des élèves. Les deux tableaux ont une clé commune, à savoir "studentId

let studentDetails = [
  { studentId: 1, studentName: 'Sathish', gender: 'Male', age: 15 },
  { studentId: 2, studentName: 'kumar', gender: 'Male', age: 16 },
  { studentId: 3, studentName: 'Roja', gender: 'Female', age: 15 },
  {studentId: 4, studentName: 'Nayanthara', gender: 'Female', age: 16},
];

let studentMark = [
  { studentId: 1, mark1: 80, mark2: 90, mark3: 100 },
  { studentId: 2, mark1: 80, mark2: 90, mark3: 100 },
  { studentId: 3, mark1: 80, mark2: 90, mark3: 100 },
  { studentId: 4, mark1: 80, mark2: 90, mark3: 100 },
];

Je veux fusionner les deux tableaux en fonction de la clé 'studentId'. J'ai créé une fonction pour fusionner les deux tableaux.

const mergeById = (array1, array2) =>
    array1.map(itm => ({
      ...array2.find((item) => (item.studentId === itm.studentId) && item),
      ...itm
    }));

Voici le code pour obtenir le résultat final

let result = mergeById(studentDetails, studentMark ) ;

[
{"studentId":1,"mark1":80,"mark2":90,"mark3":100,"studentName":"Sathish","gender":"Male","age":15},{"studentId":2,"mark1":80,"mark2":90,"mark3":100,"studentName":"kumar","gender":"Male","age":16},{"studentId":3,"mark1":80,"mark2":90,"mark3":100,"studentName":"Roja","gender":"Female","age":15},{"studentId":4,"mark1":80,"mark2":90,"mark3":100,"studentName":"Nayanthara","gender":"Female","age":16}
]

Answer 5

Vous pouvez également utiliser la forme recommandée par ES6 :

data => {
  this.results = [
    ...this.results,
    data.results,
  ];
  this._next = data.next;
},

Cela fonctionne si vous initialisez d'abord votre tableau ( public results = []; ) ; sinon, remplacez ...this.results, par ...this.results ? this.results : [], .

J'espère que cela vous aidera