Styjun

I have an http get request to get an array like

[
 name: 'name1', id: 1, specialProp: [] ,
 name: 'name2', id: 2, specialProp: [] 
]

I need to get each of array items, take an id and send a request to server to get some information. The results should be written into the property specialProp. After that I need to take the array of the prop specialProp and for each item get some data, put it into anotherSpecialProp. In the end I should have the final array like

[
 name: 'name1', id: 1, specialProp: [
 name: 'c', anotherSpecialProp: [], 
 name: 'd', anotherSpecialProp: []
 ],

 name: 'name2', id: 2, specialProp: [
 name: 'a', anotherSpecialProp: [],
 name: 'b', anotherSpecialProp: []
 ]
]

I have the code:

this.http.get(url)
 .pipe(
 switchMap((mainItemArr: any) => from(mainItemArr)),
 mergeMap((mainItem: any): any => 
 return this.getSomeInfo(mainItem.Id) //another http get request
 .pipe(
 map((data: any): any => 
 return Object.assign(mainItem, specialProp: data )
 ),
 switchMap((mainItemArr: any): any => from(mainItemArr.specialProp)),
 concatMap((item: any): any => 
 return this.getSomeOtherInfo(item.Id) // one more http get request
 .pipe(
 map((data: any): any => Object.assign(, task, anotherSpecialProp: data ))
 )
 ),
 )
 )
 )

So in subscribe I receive just the items, not the whole mainItemArr.
Could anyone please assist me with the issue?:)

The main trick is to use map to merge scoped property with request result.

Here's a rough example how to achieve this for the first level (specialProp):

this.http.get(url).pipe(
 mergeMap(mainItemArr => 
 // forkJoin will wait for each request to complete
 return forkJoin(
 // make a subsequent request for each item in mainItemArr
 mainItemArr.map(mainItem => 
 return this.getSomeInfo(mainItem.Id).pipe(
 // merge getSomeInfo result with the mainItem
 map(someInfo => 
 return 
 ...mainItem,
 specialProp: someInfo
 ;
 )
 )
 )
 )
 )
)

For the anotherSpecialProp requests — you'll need to go one level deeper.

In a real world application I'd suggest splitting those subsequent calls into separate functions/methods.

NOTE:

You don't need turning array into Observable:

mergeMap(mainArray => mainArray)

Instead you might keep it in the JS scope and do subsequent requests in the mergeMap, e.g.:

mergeMap(mainArray => 
 // making sub requests here
)

Using mergeMap to turn array into Observable should work too, though it might be more confusing when diving 1 level deeper, imho. Anyway, the map does the main trick.

Hope this helps

If I get it right, what you need to do is the following:

• fetch the initial array from back end


• for each element of the array, call getSomeInfo and store the result, which should be an array, into the specialProp property


• then, for each entry in the specialProp array, you want to call the getSomeOtherInfo method, fetch some more data and store it into a property called anotherSpecialProp

If all this is true, then you can try something along these lines

getArray()
.pipe(
 mergeMap(mainArray => mainArray), // unwind the array received
 switchMap(mainItem => getSomeInfo(mainItem.id) // fetch the first set of info from backend
 .pipe(
 tap(someInfo => 
 mainItem['specialProp'] = someInfo; // wrote someInfo into specialProp property
 ),
 mergeMap(specialProps => specialProps), // unwind the array of specialProps
 switchMap(specialProp => getSomeOtherInfo(specialProp.name) // for each specialProp fetch the additional data
 .pipe(
 tap(someOtherInfo => 
 specialProp['anotherSpecialProp'] = someOtherInfo // store additional data into anotherSpecialProp property
 )
 )
 ),
 toArray(), // rewind the array of specialProps and return it
 map(() => mainItem)
 )
 ),
 toArray() // rewind the array of mainItems and return it
)

The thing you may want to notice is the use of mergeMap with an Array, e.g. mergeMap(mainArray => mainArray).

mergeMap accepts as input a function which returns an ObservableInput. An Array is an ObservableInput which emits all of its items synchronously before completing. So, passing a function which returns an Array to mergeMap means to emit all the elements of the Array.

You can find an example of the above example here