merge two object arrays with Angular 2 and TypeScript?

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.

Solution 1:

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:

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:

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

result.push(...data);

Solution 4:

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