Angular - Parse nested JSON

Question

I have an Angular 12 application and am getting back a complex type, which I have mapped to interfaces.

When I console.log this object, I see the values I am expecting, however trying to log the members array here comes back as undefined.

My Angular code is:

this.conferenceService
  .getConferenceBridge(this.selectedConferenceBridgeBoxnum)
  .subscribe((cb) => {
    this.conferenceBridge = cb;
    console.log(cb.members); <--- says it's undefined
}

The interface has "members" as an array.

members: ConferenceBridgeMember[];

Why is this undefined here? This isn't a parsing problem as I can see this array after the .get and it looks fine.

Can you include the output of `console.log(JSON.stringify(cb))`? I guess that's what you have in the screenshot, but if you could include the raw text version, just to be sure... — Allan Juan, Nov 08 '21 at 22:18
@AllanJuan I can't provide the whole log, but I do see the members array in it. `"members":[{"type":"caller","id":6,"flags":` etc I am lost as to why `console.log(cb.members)` returns undefined here, when I just log `cb` I can see the members array, — Patrick, Nov 08 '21 at 23:24

score 0 · Answer 1 · answered Nov 08 '21 at 22:20

0

I thing the problem in the mapping into getConferenceBridge function so try to remove it first if it is fixed so the mapping the mainly issue

and you can try this approach to cast the object as in the example below with Typescript

//some interfaces
    interface Item{
        id:number,
        name:string
    }
    
    interface Box{
        id:101,
        items:Item[]
    }
// fake object similar to the interfaces
    const box = {
        items:Array([
            {
                id:1,
                name:'item 1'
            },
            {
                id:2,
                name:'item 1'
            }
        ])
    }

// casting function
    function cast<T>(obj:any):T{    
        return obj as T;
    }

// here i will found the item had printed successfully 
    console.log(  cast<Box>(box).items[0] );

answered Nov 08 '21 at 22:20

Mahmoud shahin

26
1
4

The service is very simple, it's exactly how I do it for all my services. `return this.httpClient.get(url) .pipe(map((r) => r.result as ConferenceBridge));` That is valid and I do get an the object back including the members array. I'm lost, I can't tell if this some weird Angular issue, but I doubt it. I must be doing something wrong, I just don' see it. – Patrick Nov 08 '21 at 23:30
Is `ConferenceBridge` class or interface? – Mahmoud shahin Nov 09 '21 at 01:29
It's an interface. – Patrick Nov 09 '21 at 01:53
try to remove the map operator from the service and use it in the component before `console.log` and try again without `map` like that `(cb as ConferenceBridge).members` – Mahmoud shahin Nov 09 '21 at 11:37

Angular - Parse nested JSON

1 Answers1