menggabungkan dua larik objek dengan Angular 2 dan TypeScript?

92

Saya telah membahas pertanyaan JavaScript tentang topik ini, pertanyaan ini secara khusus tentang Angular2 dengan TypeScript.

Apa yang saya coba lakukan adalah menggabungkan objek json ke array.

Kode saya terlihat seperti ini,

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

Bagaimana saya bisa menggabungkan data.resultsuntuk this.resultsdengan naskah dan sudut?

this._slugdan this._nextditetapkan di kelas.

Terima kasih.

Rivadiz
sumber

Jawaban:

122

Saya pikir Anda harus menggunakan yang berikut ini:

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

Dari concat dokumen :

Metode concat () mengembalikan larik baru yang terdiri dari larik tempat ia dipanggil bergabung dengan larik dan / atau nilai yang disediakan sebagai argumen.

Thierry Templier
sumber
1
sayangnya, itu tidak berfungsi dengan Uint8arrays :(
Frederick Nord
Mungkin gagal jika this. Hasilnya null atau tidak ditentukan
Michael Freidgeim
173

The spread Operator yang agak dingin.

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

Operator penyebaran memungkinkan Anda dengan mudah menempatkan versi array yang diperluas ke dalam array lain.

Anda dapat membaca tentang operator penyebaran di sini.

Amsakanna
sumber
35

Dengan operator sebaran sudut 6 dan concat tidak berfungsi. Anda bisa mengatasinya dengan mudah:

result.push(...data);
Bulan
sumber
datang ke sini mencari solusi sambil mempertahankan referensi objek antar metode. ini bekerja dengan sempurna. terima kasih
jgritten
Ini tidak menggabungkan array, ini menambahkan data dari yang kedua ke yang pertama. Meskipun dapat melakukan pekerjaan itu, itu adalah sesuatu yang harus diperhatikan karena memodifikasi larik asli.
Davor
5

Anda juga dapat menggunakan formulir yang direkomendasikan oleh ES6:

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

Ini bekerja jika Anda menginisialisasi array Anda terlebih dahulu ( public results = [];); jika tidak diganti ...this.results,dengan ...this.results ? this.results : [],.

Semoga ini membantu

Babak
sumber
2

coba ini

 data => {
                this.results = [...this.results, ...data.results];
                this._next = data.next;
            }
Trilok Singh
sumber
0

Asumsikan saya memiliki dua array. Yang pertama berisi detail siswa dan detail nilai siswa. Kedua array tersebut memiliki kunci yang sama, yaitu '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 },
];

Saya ingin menggabungkan dua array berdasarkan kunci 'studentId'. Saya telah membuat fungsi untuk menggabungkan dua array.

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

berikut adalah kode untuk mendapatkan hasil akhir

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}
]
Yogesh Waghmare
sumber