merge two object arrays with Angular 2 and TypeScript?

ArraysTypescriptAngular

Arrays Problem Overview


I have gone across the JavaScript questions on this topic, this question is specifically about Angular2 with TypeScript.

What I am trying to do is to concatenate the json objects to an array.

My code looks something like this,

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

How can I concatenate data.results to this.results with typescript and angular?

this._slug and this._next are set on class.

thanks.

Arrays Solutions


Solution 1 - Arrays

The spread operator is kinda cool.

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

> The spread operator allows you to easily place an expanded version of an array into another array.

You can read about spread operator here.

Solution 2 - Arrays

I think that you should use rather the following:

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

From the concat doc:

> The concat() method returns a new array comprised of the array on which it is called joined with the array(s) and/or value(s) provided as arguments.

Solution 3 - Arrays

With angular 6 spread operator and concat not work. You can resolve it easy:

result.push(...data);

Solution 4 - Arrays

You can also use the form recommended by ES6:

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

This works if you initialize your array first (public results = [];); otherwise replace ...this.results, by ...this.results ? this.results : [],.

Hope this helps

Solution 5 - Arrays

> Assume i have two arrays. The first one has student details and the > student marks details. Both arrays have the common key, that is > ‘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 },
];

> I want to merge the two arrays based on the key ‘studentId’. I have > created a function to merge the two arrays.

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

> here is the code to get the final result

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

Solution 6 - Arrays

try this

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser5170375View Question on Stackoverflow
Solution 1 - ArraysAmsakannaView Answer on Stackoverflow
Solution 2 - ArraysThierry TemplierView Answer on Stackoverflow
Solution 3 - ArraysMooNView Answer on Stackoverflow
Solution 4 - ArraysBabakView Answer on Stackoverflow
Solution 5 - ArraysYogesh WaghmareView Answer on Stackoverflow
Solution 6 - ArraysTrilok SinghView Answer on Stackoverflow