在模板中显示 API JSON 响应 - Angular

Question

我想在我的网站上显示来自 URL 的 JSON 文件的数据。 我在 Angular 上工作，并且在我的组件中创建了一个 HttpClient 。下面的代码显示了控制台中的所有文档，所以这是我的问题。

  let resp = this.http.get("https://spreadsheets.google.com/feeds/cells/1w2vpgbwImaQGCbpMqZ3P0NC93tuVved0oOFc9Zr22dU/1/public/full?alt=json");
   resp.subscribe((data)=>console.log(data));
   

我可以显示此 JSON 文件中的指定元素吗？

我想在我的网站上显示来自：feed -> entry -> gs$cell -> $t 的数据。 我应该如何开始，我需要什么？

我添加了一张 JSON 数组的外观图片以及我想要在我的网站上获取和显示的元素。

Answer 1

将 API 响应存储在类变量中，即 data，假设样本数据

  data = {
    feed: {
      entry: [
        { gs$cell: { $t: 'Nazwa' } },
        { gs$cell: { $t: 'pazwa' } },
        { gs$cell: { $t: 'shuzwa' } }
      ]
   }
 }

直接在模板中访问

<div *ngFor="let d of this.data.feed.entry">{{d.gs$cell.$t}}</div> 

Answer 2

在我看来，您的问题是如何提取数据。

我不能使用你的 HttpClient，所以我将使用fetch API 进行演示。

async function getData() {
  const endpoint =
    "https://spreadsheets.google.com/feeds/cells/1w2vpgbwImaQGCbpMqZ3P0NC93tuVved0oOFc9Zr22dU/1/public/full?alt=json";

  // const json = await http.get(endpoint);

  const response = await fetch(endpoint);
  const json = await response.json();

  const { feed } = json;
  const { entry: feedEntries } = feed;

  return feedEntries.map((entry) => {
    const { gs$cell } = entry;
    const { $t } = gs$cell;
    return $t;
  });
}

(async () => {
  const data = await getData();
  console.log(data);

  // do whatever you wan't with the data, use it on your template maybe?
})();