在模板中顯示 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 響應存儲在 class 變量中，即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? })();