在 Html 中显示 Angular 中的 JSON 文件答案

【问题标题】：Show in Html a JSON file in Angular在 Html 中显示 Angular 中的 JSON 文件
【发布时间】：2019-12-16 06:38:12
【问题描述】：

我正在尝试在 html 文件中打印 JSON (link to the JSON)。

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"}
        ]
      ]
    }
  }
}

我已经获取并保存在一个变量中：

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);
  };
}

如何在 html 代码中打印它？我可以只使用de“。”进入其领域？还是更复杂？

【问题讨论】：

标签： html arrays json angular typescript

【解决方案1】：

我们可以使用pre标签来查看HTML中的JSON数据在 var 数据中传递您的 JSON。并在 HTML 正文中设置 pre 标签。

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

【讨论】：

【解决方案2】：

您可以在模板中使用JsonPipe。

{{fileJson | json}}

如果您想打印特定部分，可以通过. 导航到对象结构的更深处。

{{fileJson.ricette.FRIGGITRICI | json}}

如果要打印原始值，插值就足够了，不需要 json 管道。

{{fileJson.version}}

更新

您是否调用了您的getDati 函数？添加一个 ngOnInit Lifecycle Hook 并在那里调用它。 Here 是一个有效的 stackblitz 示例。

我刚刚意识到这是您的示例代码中的一项服务。获取服务并将其注入组件并在那里调用它。

【讨论】：

我的代码没有任何反应... fileJson 和 fetch 不在 html 文件中
我用完整的工作示例更新了答案。