Angular Loop on fetched observable array data and fetch another array of data in it

Question

Hello I have an API call getItems() that return data like this :

[
 {
   name: 'item1',
   materials: [
     1,
     2,
     3,
   ],
 },
 {
   name: 'item2',
   materials: [
     2,
     3,
     6,
   ],
 }
 ...
]

And another API call getMaterial(id) that return the data of a material like this :

{
  name: 'mat1',
  img: '/img.jpg'
}

What I'm try to achieve is to get all the items data with the materials data. I manage to have all the observable call for materials but I don't know what to do after.

That's what I've done so far :

public getAllItemsData(): Observable<any> {
  return getItems().pipe(
    map((list: items[]) => {
      return list.map(item => {
        const allMat = item.materials.map(m => getMaterial(m))

        return forkJoin(allMat).pipe(
          map(data => {
            return {
              ...item,
              materials: data
            }
          })
        )
      })
    }),
  );
}

But it's not working. Thank for the help.

navnath · Accepted Answer · 2021-10-09 19:37:51Z

2

Try this. Using switchMap, mergeMap, from, forkJoin

getItems()
  .pipe(
    switchMap((items) =>
        // for each items
      from(items).pipe(
       // merge map to run parallel for each items
        mergeMap(({ materials, ...item }) =>
        // wait to retrive all materials details of current item at mergeMap
        // after completing use map to map item with retrived materials 
          forkJoin(
            materials.map((m) => this.getMaterial(m))
          ).pipe(map((materialDetails) => ({ ...item, materials: materialDetails })))
        )
      )
    )
  )
  .subscribe((result) => {
    console.log(result);
  });

answered Oct 9, 2021 at 19:37

navnath

3,7241 gold badge13 silver badges20 bronze badges

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

5 Comments

Imad El Hitti Over a year ago

Is there a way to do it without switchMap, to make it easier (I shouldn't have) I ommit the point that I'm using firestore valuechange which mean there is an active stream and I feel like the switchMap causing problems in this solution ! I have no errors, but I have no output data.

navnath Over a year ago

If You can generate on stackblitz. I can help you easily

Imad El Hitti Over a year ago

Here you go : stackblitz.com/edit/angular-ivy-wbdfnk?file=src/app/…

navnath Over a year ago

error Can't find package:@angular/fire.. Can you share some JSON data instead? Or should i come up with demo example with data from question?

Imad El Hitti Over a year ago

Let us continue this discussion in chat.

matthew2564 · Accepted Answer · 2021-10-09 20:18:57Z

1

Very similar to the above just with less nested pipes

interface Item {
    name: string;
    materials: number[];
}

interface MaterialData {
    name: string;
    img: string;
}

public getAllItemsData() {
    return getItems().pipe(
        switchMap((items: Item[]) => from(items)), // use 'from' to deal with one Item at a time
        mergeMap(({ materials, name }: Item) =>
            forkJoin(materials.map((mat) => getMaterial(mat))) // create array of observables using map, and pass into forkJoin 
                .pipe(
                    map((materials) => ({ name, materials })), // reconstruct object
                ),
        ),
        toArray(), // collect all emissions and output as an array
    );
};

answered Oct 9, 2021 at 20:18

matthew2564

413 bronze badges

1 Comment

Imad El Hitti Over a year ago

Is there a way to do it without switchMap, to make it easier (I shouldn't have) I ommit the point that I'm using firestore valuechange which mean there is an active stream and I feel like the switchMap causing problems in this solution ! I have no errors, but I have no output data

Mrk Sef · Accepted Answer · 2021-10-11 16:20:44Z

0

I think you're just missing a final merge/forkJoin to subscribe to the array of observables you've created.

public getAllItemsData(): Observable<any> {

  return getItems().pipe(

    map((list: items[]) => 
      list.map(item => 
        forkJoin(
          item.materials.map(m => getMaterial(m))
        ).pipe(
          map(materials => ({
            ...item,
            materials
          }))
        )
      )
    ),

    // Subscribe to the list created above
    mergeMap((list:Observable<any>[]) => forkJoin(list))

  );

}

answered Oct 11, 2021 at 16:20

Mrk Sef

8,0721 gold badge14 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular Loop on fetched observable array data and fetch another array of data in it

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related