ผสานอาร์เรย์อ็อบเจ็กต์สองอาร์เรย์ด้วย Angular 2 และ TypeScript?


92

ฉันได้อ่านคำถามเกี่ยวกับ JavaScript ในหัวข้อนี้คำถามนี้เกี่ยวกับ Angular2 กับ TypeScript โดยเฉพาะ

สิ่งที่ฉันพยายามทำคือการต่อวัตถุ json เข้ากับอาร์เรย์

รหัสของฉันมีลักษณะเช่นนี้

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

ฉันdata.resultsจะเชื่อมต่อthis.resultsกับ typescript และ angular ได้อย่างไร?

this._slugและthis._nextตั้งอยู่ในชั้นเรียน

ขอบคุณ.

คำตอบ:


123

ฉันคิดว่าคุณควรใช้สิ่งต่อไปนี้:

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

จากconcat เอกสาร :

เมธอด concat () ส่งคืนอาร์เรย์ใหม่ที่ประกอบด้วยอาร์เรย์ซึ่งถูกเรียกว่ารวมกับอาร์เรย์และ / หรือค่าที่ระบุเป็นอาร์กิวเมนต์


1
น่าเสียดายที่ใช้ไม่ได้กับ Uint8arrays :(
Frederick Nord

อาจล้มเหลวหากสิ่งนี้ผลลัพธ์เป็นโมฆะหรือไม่ได้กำหนด
Michael Freidgeim

173

ตัวดำเนินการแพร่กระจายค่อนข้างเย็น

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

ตัวดำเนินการกระจายช่วยให้คุณวางอาร์เรย์เวอร์ชันขยายลงในอาร์เรย์อื่นได้อย่างง่ายดาย

คุณสามารถอ่านเกี่ยวกับตัวดำเนินการกระจายได้ที่นี่


35

ด้วยมุม 6 ผู้ประกอบการแพร่กระจายและconcatไม่ทำงาน คุณสามารถแก้ไขได้ง่ายๆ:

result.push(...data);

มาที่นี่เพื่อค้นหาวิธีแก้ปัญหาในขณะที่ยังคงการอ้างอิงวัตถุระหว่างวิธีการ สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบ ขอบคุณ
jgritten

สิ่งนี้ไม่ได้รวมอาร์เรย์ แต่จะเพิ่มข้อมูลจากอันที่สองเป็นอันแรก แม้ว่าจะสามารถทำงานได้ แต่ก็เป็นสิ่งที่ต้องระวังเนื่องจากมีการปรับเปลี่ยนอาร์เรย์เดิม
Davor

5

คุณยังสามารถใช้แบบฟอร์มที่ ES6 แนะนำ:

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

ใช้งานได้ถ้าคุณเริ่มต้นอาร์เรย์ของคุณก่อน ( public results = [];); อย่างอื่นแทนโดย...this.results,...this.results ? this.results : [],

หวังว่านี่จะช่วยได้



0

สมมติว่าฉันมีสองอาร์เรย์ อันแรกมีรายละเอียดนักเรียนและรายละเอียดคะแนนนักเรียน อาร์เรย์ทั้งสองมีคีย์ร่วมนั่นคือ '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 },
];

ฉันต้องการผสานสองอาร์เรย์ตามคีย์ 'studentId' ฉันได้สร้างฟังก์ชันเพื่อผสานสองอาร์เรย์

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

นี่คือรหัสเพื่อรับผลลัพธ์สุดท้าย

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}
]
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.