如何使用Angular 2和TypeScript合并两个对象数组？

Question

我已经查看了关于此主题的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);
            }
        );
}

如何在typescript和angular中将data.results连接到this.results?

this._slug和this._next在类上设置。

谢谢。

- user5170375

Answer 1

扩展运算符有点酷。

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

---

展开运算符允许你轻松地将一个数组的扩展版本放入另一个数组中。

你可以在这里阅读有关展开运算符的内容。

- Amsakanna

---

扩展运算符的更新网址在此处：https://basarat.gitbook.io/typescript/future-javascript/spread-operator - cacti5

Answer 2

我认为你应该使用以下内容：

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

从 concat 的文档中得知：

concat() 方法返回一个新数组，由调用此方法的数组与传入的数组和/或值拼接组成。

- Thierry Templier

---

不幸的是，这在Uint8arrays上不起作用 :( - Frederick Nord

如果 this.results 为 null 或未定义，可能会失败。 - Michael Freidgeim

Answer 3

使用Angular6的展开运算符和concat无法工作。您可以轻松解决：

result.push(...data);

- MooN

---

来这里寻找一个在方法之间保持对象引用的解决方案，这个方法完美地解决了我的问题。谢谢。 - jgritten

这并不是合并数组，而是将第二个数组的数据添加到第一个数组中。虽然它可以完成任务，但需要小心，因为它会修改原始数组。 - Davor

完美的解决方案！ - Pandiyan Cool

太棒了，我在将空数组连接(concat)时遇到了问题，但在这行代码之前添加'result ??= [];'使我的代码完整。 - Mohammadreza Askari

Answer 4

假设我有两个数组。第一个数组包含学生详细信息，第二个数组包含学生成绩详细信息。这两个数组都有共同的键，即“学生ID”。

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

- Yogesh Waghmare

Answer 5

你可以使用 ES6 推荐的表单方式：

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

如果您先初始化数组（public results=[];），则此方法可行；否则，请将...this.results,替换为...this.results ? this.results : [],。

希望这可以帮到您。

- Babak

Answer 6

尝试这个。

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

- Trilok Singh