Angular 2 JSON Parsing not working

Question

I'm using Http.get to retrieve information via json format via angular 2.

Here's a service I'm using to get the json data which works:

getProd() {
    return this._http.get('https://restcountries.eu/rest/v1/capital/tallinn')
        .map(res => res.json());   
}

Then in the component constructor I'm using:

this._etsyService.getProd().subscribe(product => {
        this.product = product;
    });

Then in the view template, if I specify:

{{ product | json }}

I get in the browser a raw json printout:

[ { "name": "Estonia", "topLevelDomain": [ ".ee" ], "alpha2Code": "EE", "alpha3Code": "EST", "callingCodes": [ "372" ], "capital": "Tallinn",

However, if I try to change {{ product, to {{ product.name }} for instance (with and without the pipe | json at the end, I get an error that it cannot read property 'name' of undefined?

I'm new to Angular, and I'm sure it's just a parsing issue I'm coming up with. I've tried a ton of combinations.

Help?

When template render, product.name is undefined. You using pipe | json to convert it to JSON format, if not it will raise your error. Just use pipe | json or place *ngIf="product" directive will solved the problem — eugene
– eugene, Commented Oct 10, 2016 at 4:23

Sefa · Accepted Answer · 2016-10-10 05:22:28Z

1

Your json is not a single object, it's an array.

In your component

this._etsyService.getProd().subscribe(product => {
        this.product = product[0];
    });

And in your template

{{ product.name }}

answered Oct 10, 2016 at 5:22

Sefa

9,00210 gold badges54 silver badges85 bronze badges

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

6 Comments

Gary Simon Over a year ago

Yes, thanks, this was the issue with that particular json. I have a similar issue with a different API that's returning json like this: { "response": { "version": "0.1", "termsofService": "wunderground.com/weather/api/d/terms.html", "features": { "conditions": 1 } }, "current_observation": { "image": { "url": "icons.wxug.com/graphics/wu2/logo_130x80.png", "title": "Weather Underground" If I try to specify {{ product.title }} nothing shows. I guess I just don't have enough experience parsing json data, so I'm running into these issues.

Sefa Over a year ago

I believe this is not all of the json. If you can edit the question and add your new json as update i can take a clear look.

Gary Simon Over a year ago

Ah okay, I got it now. this.product = product['current_observation']['image']; works. In this case, within the .subscribe function, I would have to add multiple variables such as: this.product, this.otherinfo, this.etc.. in order to access different parts of that json return. I'm just curious if there's a way to do that within the view.

Sefa Over a year ago

Set this.product = product; and access to product.current_observation.image, product.etc in the template. All the properties returned from the json will be available in the view in this way.

Gary Simon Over a year ago

Wow man.. I tried that last night, I swear! (I was drinking, though) and it would not work. Now it does. Thanks!

|

micronyks · Accepted Answer · 2016-10-10 04:32:00Z

1

For that you could use ?. operator whenever you deal with async call as shown below,

{{product?.name})

answered Oct 10, 2016 at 4:32

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Comments

Rob · Accepted Answer · 2016-10-10 04:37:52Z

1

As mentioned in @cuongngo comment, *ngIf="product" on a parent container is a relatively simple fix.

Something like this should also work...

{{ (product | async).name }}

edited Oct 10, 2016 at 4:37

answered Oct 10, 2016 at 4:32

Rob

12.9k4 gold badges44 silver badges57 bronze badges

Collectives™ on Stack Overflow

Angular 2 JSON Parsing not working

3 Answers 3

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Related