angular how to get array of nested object from two tables one-to-many related

Question

Hi everybody I have 2 mysql tables: itemsClass which contains a list of possible classes, and itemType which refers to itemClass and contains type values of a particular class.

I'm trying to build a service which returns an Observable<Item[]>, combining two http.get Observables, suiting this interface:

interface Item{
 itemcClassId:any; //itemClass.id, from itemClass select
 itemClassName:any; //itemClass.name from itemClass select
 itemTypeValue?:any;    //from itemType select, if itemType contains only a value of the first table's class
 itemTypeValues?:any[]; //if itemType's values are multiple
}

I came across (after infinite searches) a code structure like this

getEmploye(name: string): Observable<any> {
    return this.getClass(name).pipe(
      switchMap((response) => {
        return forkJoin(of(response),this.getType(class.id);),
               map(res=>{
                 return {...res[0],values:...res[1]}
               })
      })
    ) 
  }

but it would return a single item while I need an array of items.. any hint?

thank everybody

EDIT: the code I pasted wasnt customized, just pasted because it seemed to comply with similar needs (or at least part of);

A customized version (returning only one item) would consist in (as far as I can understand) something like the following:

getItem(id: number): Observable<Item> {
    return this.http.get(url_to_ItemClass_rest_api).pipe(
      switchMap((item) => {
        return forkJoin(of(item),
this.http.get(url_to_ItemType_rest_api_filtered_by_foreign_key_item.id/);),
               map(res=>{
                 return {...res[0],values:...res[1]}
               })
      })
    ) 
  }

Where is the `class` coming from `class.id`? The interface shows `itemcClassId` (possibly a typo, I assume it's `itemClassId`) but the code uses just `class.id` and not `class.itemClassId`? — ruth, Oct 21 '21 at 07:01
just didn't want to use dot in the stracture's properties name.. just edited to clarify — Nik Rubblers, Oct 21 '21 at 07:20
Perhaps you didn't understand the question clearly. You're using a `class.id` in the code. But I don't see the `class` variable/object defined anywhere. — ruth, Oct 21 '21 at 07:21
what does `this.getClass` return? List of `itemsClass` or one particular `itemsClass`? And it's not clear what does `this.getType` return. Also I would suggest to write types properly - it will help you to understand how your data should be modified — vitaliy kotov, Oct 21 '21 at 07:43
@vitaliykotov tried to write as properly as I can, the code I pasted seems to suit to my needs but isn't customized so far, just seemed to do at least part of what I need (even if forkJoin is marked as deprecated) — Nik Rubblers, Oct 21 '21 at 07:55

Nena · Accepted Answer · 2021-10-22T17:08:13.687

1

forkjoin is deprecated in that mode. You have to pass an array::

forkjoin([of(item),
this.http.get(url_to_ItemType_rest_api_filtered_by_foreign_key_item.id/)])

If you want a single return with key and value, you can return something like this: const ret = { ...res[0], values: res[1] };

  getEmploye(id: number): Observable<any> {
    return this.getClass(id).pipe(
      switchMap(item => {
        return forkJoin([of(item), this.getType(item.id)]).pipe(
          map(res => {
            const ret = { ...res[0], values: res[1] };
            return ret;
          })
        );
      })
    );
  }

For the Array try something like this:

getClass(name: number): Observable<Array<{id: string}>>

getType(classId: string): Observable<Array< string >>

getEmploye(id: number): Observable<any> {
    return this.getClass(id).pipe(
      switchMap(items => {
        const forkRequest: Array<any> = [of(items)];
        items.forEach( item => forkRequest.push(this.getType(item.id)));

        return forkJoin(forkRequest).pipe(
          map((res: Array<any>) => {
            const returnList: Array<{id: string, values: Array<any>}> = [];
            res.forEach((item: any, index: number) => {
              if (index > 0) {
                const returnObj = { id: res[0][index - 1].id, values: item };
                returnList.push(returnObj);
              }
            });
            return returnList;
          })
        );
      })
    );
  }

edited Oct 22 '21 at 17:08

answered Oct 21 '21 at 08:32

Nena

51
4

this sounds.. thank u.. by the way I'd need an array of items, so the correct function prototype would be getItems(): Observable {} – Nik Rubblers Oct 21 '21 at 08:40
so get(url_to_ItemClass_rest_api) should return a list of ids and, for each id, a call will be made to get(url_to_ItemType_rest_api_filtered_by_foreign_key_item.id/)? – Nena Oct 21 '21 at 10:02
yes.. it all with something like a foreach inside a switchmap or something similar.. that's what I cant figure out.. – Nik Rubblers Oct 21 '21 at 12:58
Edited. Let me know if that's what you wanted – Nena Oct 22 '21 at 17:09
that's brilliant.. I'll fit it to my code and I'll try it.. where have u been hiding with these skill out of stackoverflow???? – Nik Rubblers Oct 23 '21 at 04:59
I just signed up. I have little time because I work a lot. If you like my solution, can you rate my answer? – Nena Oct 26 '21 at 08:12

angular how to get array of nested object from two tables one-to-many related

1 Answers1