How to merge 2 objects that contain an array of objects each?

Question

I have an observable that gets data from an API, this is hooked up to a paginating feature. How do I add the response data object on to the variable which holds the first pages data. Essentially what Array push does.

Right now each pagination will send a request to the API, even the previous pages since I am overwriting the data. I would like to add the array of objects (data.articles) on to the end of the category that is selected.


data = {
   general: undefined,
   business: undefined,
   entertainment: undefined,
   health: undefined,
   science: undefined,
   sports: undefined,
   technology: undefined
};

this.newsService.getNews(endpoint, params).subscribe(data => {
   this.data[category] = data.articles;
});

I expect the data to work like this:

If i show 1 article on the general tab, data.general will hold an array with one object in it. When i click next page, data.general should hold an array with 2 objects in it, and so on.

Solution

Array.prototype.push worked, for some reason when i initially tried this it didn't work. But i think that was because it was undefined initially. The below however works fine.

if (!this.data[category]) {
   this.data[category] = data.articles;
} else {
   Array.prototype.push.apply(this.data[category], data.articles);
}

concat This seems very basic JS if I understood your question correctly. plenty of answers out there and documentation by googling. And this has nothing to do with angular ;) — AVJT82
– AVJT82, Commented Aug 3, 2019 at 17:40

William Gunawan · Accepted Answer · 2019-08-03 17:45:48Z

1

Try this, maybe this is what you want.

Array.prototype.push.apply(this.data[category], data.articles);

Above code will merge to array of objects into one and set to this.data[category]

edited Aug 3, 2019 at 17:45

answered Aug 3, 2019 at 17:38

William Gunawan

7503 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Amardeep Bhowmick Over a year ago

This is not correct, the result of push is the new size of the resulting array which will be assigned to the this.data[category]

trincot Over a year ago

Hint: don't perform the assignment. Just do Array.prototype.push......

bryan60 Over a year ago

couldn't you just do [this.data[category].push(data.articles)

William Gunawan Over a year ago

no, it can't work. because it's multi array. apply change array to argument for the final push method like this. this.data[category].push(data.articles[0], data.articles[1], data.articles[2], ...);

DeborahK · Accepted Answer · 2019-08-04 05:21:10Z

I know you have already accepted an answer, but if you were interested in retaining the data in streams instead of in arrays, you can do something like this:

  // Action Stream
  private productInsertedSubject = new Subject<Product>();
  productInsertedAction$ = this.productInsertedSubject.asObservable();

  // Merge the streams
  productsWithAdd$ = merge(
    this.products$,                       // Original stream of data
    this.productInsertedAction$           // New data
  )
    .pipe(
      scan((acc: Product[], value: Product) => [...acc, value]),
      catchError(err => {
        console.error(err);
        return throwError(err);
      })
    );

And if you were adding an array instead of a single value, the technique would be similar.

Collectives™ on Stack Overflow

How to merge 2 objects that contain an array of objects each?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related