Show in Html a JSON file in Angular

Question

I'm trying to print a JSON (link to the JSON) in an html file.

JSON:

{
  "ricette": {
    "FRIGGITRICI": {
      "Alici": [
        [
          {"500": "scongelamento"}
        ],
        [
          {"60": "nada"}
        ]
      ],
      "Baccalà": [
        [
          {"500": "scongelamento"}
        ],
        [
          {"210": "immerso"},
          {"210": "cestello su"},
          {"30": "immerso"}
        ]
      ]
    },
    "GRIGLIA": {
      "Baccalà": [
        [
          {"500": "scongelamento"}
        ],
        [
          {"210": "immerso"},
          {"210": "cestello su"},
          {"30": "immerso"}
        ]
      ]
    }
  }
}

I've fetched it and saved in a variable:

export class DatiService {
  fileJson: JSON;

  constructor() { }

  private datiUrl = 'https://api.myjson.com/bins/zbfh5';

  async getDati(){
    await fetch(this.datiUrl)
    .then(res => res.json())
    .then((out) => {
      this.fileJson=out;
    });
    console.log(this.fileJson);
  };
}

How can i print it in the html code? Can i just use de "." to enter in its fields? Or it's more complicated?

kai · Accepted Answer · 2019-08-08 14:15:46Z

5

You can use the JsonPipe in your template.

{{fileJson | json}}

If you want to print a specific part you can navigate via . deeper into the object structure.

{{fileJson.ricette.FRIGGITRICI | json}}

If you want to print a primitiv value interpolation is enough and no json pipe is needed.

{{fileJson.version}}

UPDATE

Did you called your getDati function? Add an ngOnInit Lifecycle Hook and call it there. Here is an working stackblitz sample.

I just realized it's a service in your sample code. Take the service and inject it into a component and call it there.

edited Aug 8, 2019 at 14:15

answered Aug 8, 2019 at 14:05

kai

6,92725 silver badges39 bronze badges

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

2 Comments

Andrea Favero Over a year ago

Nothing happens in my code... fileJson and the fetch aren't in the html file

kai Over a year ago

And i updated the answer with a full working sample.

ShashankMEAN · Accepted Answer · 2019-08-08 14:19:44Z

-2

We can use pre tag to view JSON data in HTML Pass your JSON in var data. And Set pre tag in HTML body.

var data = {Your JSON Object}
$("#json").innerHTML = JSON.stringify(data, undefined, 2);
<pre id="json"></pre>

answered Aug 8, 2019 at 14:19

ShashankMEAN

12 bronze badges

Collectives™ on Stack Overflow

Show in Html a JSON file in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related