How to access the Json data from a service without data model in Angular

Question

I have this Nested json that i am getting from my service get call

{
    "id": "7979d0c78074638bbdf739ffdf285c7e1c74a691",
    "seatbid": [{
        "bid": [{
            "id": "C1X1486125445685",
            "impid": "12345",
            "price": 0,
            "adm": {
                "native": {
                    "link": {
                        "url": "http: //i.am.a/URL"
                    },
                    "assets": [{
                        "id": "001",
                        "required": 1,
                        "title": {
                            "text": "Learn about this awesome thing"
                        }
                    }],
                    "imptrackers": ["https://trks.c1exchange.com/trk/c?pid=123&et=i&profileid=123&siteid=12345&adslot=AUM&adsize=300x250&imprtype=IMAGE&cpm=0.0&dspcid=834&rndid=368997882&adomain=[c1exchange.com]&urid=8787893965303118897&uimprid=2063341746607836879&urespid=0"]
                }
            },
            "adomain": ["c1exchange.com"],
            "cid": "834"
        }]
    }],
    "cur": "USD"
}{
    "id": "7979d0c78074638bbdf739ffdf285c7e1c74a691",
    "seatbid": [{
        "bid": [{
            "id": "C1X1486125445685",
            "impid": "12345",
            "price": 0,
            "adm": {
                "native": {
                    "link": {
                        "url": "http: //i.am.a/URL"
                    },
                    "assets": [{
                        "id": "001",
                        "required": 1,
                        "title": {
                            "text": "Learn about this awesome thing"
                        }
                    }],
                    "imptrackers": ["https://trks.c1exchange.com/trk/c?pid=123&et=i&profileid=123&siteid=12345&adslot=AUM&adsize=300x250&imprtype=IMAGE&cpm=0.0&dspcid=834&rndid=368997882&adomain=[c1exchange.com]&urid=8787893965303118897&uimprid=2063341746607836879&urespid=0"]
                }
            },
            "adomain": ["c1exchange.com"],
            "cid": "834"
        }]
    }],
    "cur": "USD"
}

the problem is i want to use it in my component without having a data model for the same

Presently in my component

 ngOnInit() {

    this.weatherService.getPocData().subscribe( res =>  {
      this.openRtbResponse = res.openRtbResponse;

    });

  }

and in my template

 {{openRtbResponse | json}}

I am able to access the same .

But now when i want to access the nested value like this it gives undefined like

this.openRtbResponse.seatbid[0].bid[0].adm.native.assets[0].id

its throws errors.

Without data model can't i use the json value

Possible duplicate of [Angular 2: TypeError: l\_thing0 is undefined in \[{{thing.title}} in AppComponent@4:44\]](http://stackoverflow.com/questions/34833358/angular-2-typeerror-l-thing0-is-undefined-in-thing-title-in-appcomponent) — AT82, May 10 '17 at 16:17
I am having the same problem, I managed by sending individual values frOm component in a var to HTML. — Narendra Vyas, May 10 '17 at 16:18

score 0 · Answer 1 · answered May 10 '17 at 16:16

0

Typescript is a superset of Javascript, so anything that's not explicitly typed is of type any -- which essentially means it's your "traditional" Javascript object.

You should be able to access those properties without a backing type. I'm guessing that you're trying to access it too early or the path is wrong, which is giving you the error.

To answer your question directly: Yes, you should be able to access that.

answered May 10 '17 at 16:16

chrispy

3,552
1
11
19

yup this is what i felt but i thing as i am using a service for the same i:e a http get call that is creating the issue – INFOSYS May 10 '17 at 16:23
I would just debug/log your way through it. It's either a pathing issue or a timing issue, I would imagine. – chrispy May 10 '17 at 16:25

score 0 · Answer 2 · answered May 10 '17 at 16:20

0

You must call .json() on request response like this to have a JSON object:

function getPocData() {
    return http.get('friends.json')
               .map(response => response.json());
}

Be sure to do it inside your getPocData() function from weatherService.

answered May 10 '17 at 16:20

bertrandg

3,147
2
27
35

Ok, so maybe you need to use elvis operator: `this.openRtbResponse?.seatbid[0]?.bid[0]?.adm?.native?.assets[0]?.id`, it tells angular not check what is after `?` if previous value is null/undefined – bertrandg May 11 '17 at 07:29

How to access the Json data from a service without data model in Angular

2 Answers2