How do you modify object in array with response from observable RxJs

Question

I am trying to iterate over an array of people and call an api which returns a new age which I will override the age and then merge with dogs array. The code looks like this:

const dogs = [{name:'Chichi', age:2}, {name:'Yayo', age:4}];
const people = [{name:'Mike', age:23}, {name:'John', age:45}];

const modifiedPeople = people.map(person => {        
    getNewAge(person).pipe(map(newAge=> {return person.age = newAge}));

return [...dogs, modifiedPeople];

})

This always returns an empty modifiedPeople. How can I perform this operation with RxJs in ES6

C.OG · Accepted Answer · 2019-12-25 05:20:40Z

3

You cant call the async call in the Array.map as it is a synchronous method. It will not wait for async call to complete and moves further which is why you are getting undefined for modifiedPeople and moreover pipe operator returns an Observable which needs to be subscribed for the result.

forkJoin(
  people.map(person =>
    this.getNewAge(person)
      .pipe(map(newAge => ({ ...person, age: newAge })))
  )
)
.subscribe(result => console.log(result));

the result will be your modifiedPeople

edited Dec 25, 2019 at 5:20

C.OG

6,5373 gold badges24 silver badges41 bronze badges

answered Dec 25, 2019 at 1:25

HARI CHARAN K

793 bronze badges

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

Collectives™ on Stack Overflow

How do you modify object in array with response from observable RxJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related