How to display json web response in angular template?

Question

I am trying to display some JSON data that comes as HTTP web response, but it's not working.

Below is my http request:

nodes: any;

ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('/assets/TEST.json').subscribe(data => {
        // Read the result field from the JSON response.
        this.nodes=data;
    });
}

And this is the template:

<div *ngFor="let node of nodes">
    <p>{{node.description}}</p>
</div>

This is my json data:

{
    "id": 1,
    "name": "root1",
    "link": "/login"
}

This the error I get in console:

Cannot find a differ supporting object '[object Object]' of type 'root1' where root1 is a component different from the one where the request is made.

try to log data => console.log(data) , it shows the json ? @eli — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 11, 2017 at 14:19
what's the nature of the JSON is it an array, an object.. ? can u edit the post and show a screenshot of ur json — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 11, 2017 at 14:22

Mohamed Ali RACHID · Accepted Answer · 2017-10-11 14:47:18Z

1

After our investigations in comments the solution :

*ngFor shouldn't be used there since his JSON is an object not an array

so the solution is simply :

<p> id : {{nodes.id}}</p>
<p> name : {{nodes.name}}</p>
<p> link : {{nodes.link}}</p>

answered Oct 11, 2017 at 14:47

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

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

Comments

tilo · Accepted Answer · 2017-10-11 14:31:46Z

1

First of all, your JSON is an object, not an array. Therefore, you can't use ngFor. As your object doesn't have a description property (but a name), you may display the name (make sure that nodes has been set) using this template:

<p *ngIf="nodes">{{ nodes.name }}</p>

answered Oct 11, 2017 at 14:31

tilo

14.2k6 gold badges71 silver badges86 bronze badges

2 Comments

eli Over a year ago

What if I had two or more JSON objects ?

tilo Over a year ago

If it had (ie, your file contains an array), then you could use ngFor.

Collectives™ on Stack Overflow

How to display json web response in angular template?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related