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

Question

I want to display data on my website from JSON file from URL. I work on Angular and I've create a HttpClient in my component. Code below show all document in console, so here is my question.

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

Can I show a specify elements from this JSON file?

I want to display data from: feed -> entry -> gs$cell -> $t on my website. How I should start, what I need?

I have add a picture how the JSON array looks and what elements I want to get and show on my website.

Answer 1

Store API response in a class variable ie data , assume sample data

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

Accessing directly in template

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

Answer 2

It seems to me that your problem is how to extract the data.

I can't use your HttpClient so I will be using fetch API for demonstration.

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