Angular and using a JSON from an API

Question

This is the response that I receive from the api in JSON

{
   "content":[
      {
         "id":"4354345",
         "name":"asdasd",
         "stuff":null
      },
         {
         "id":"4353345",
         "name":"fgdfgddd",
         "stuff":null
      },
         {
         "id":"4353425",
         "name":"as11111dasd",
         "stuff":null
      }

   ],
   "pageable":{
      "sort":{
         "sorted":false,
         "unsorted":true,
         "empty":true
      },
      "offset":0,
      "pageNumber":0,
      "pageSize":1000,
      "paged":true,
      "unpaged":false
   },
   "totalPages":1,
   "totalElements":75,
   "last":true,
   "number":0,
   "sort":{
      "sorted":false,
      "unsorted":true,
      "empty":true
   },
   "size":1000,
   "first":true,
   "numberOfElements":75,
   "empty":false
}

My objective is to itenerate the "Content" part of the JSON,the

"id":"4354345", "name":"asdasd", "stuff":null

in a table like this:

     <tbody>
          <tr *ngFor="let data of dataContent; index i">
                          {{data[i].id}}
                          {{data[i].name}}
                          {{data[i].stuff}}
          </tr>
      </tbody>

I'm doing it as follows:

 ngOnInit(){
       this.api.getAll((error,res) => {
           this.data = res;
           this.dataContent = this.data.content;
      });
  }

if I do a console.log of dataContent[0].id or other variables, it works, but why doesn't it show anything in the html and the console is giving errors

Please paste the error

Hitech Hitesh
– Hitech Hitesh

2021-03-02 18:38:52 +00:00
Commented Mar 2, 2021 at 18:38 — Hitech Hitesh
– Hitech Hitesh, Commented Mar 2, 2021 at 18:38
What are those errors? Try debugging it or post it here.

Vishnudev Krishnadas
– Vishnudev Krishnadas

2021-03-02 18:38:55 +00:00
Commented Mar 2, 2021 at 18:38 — Vishnudev Krishnadas
– Vishnudev Krishnadas, Commented Mar 2, 2021 at 18:38

Hitech Hitesh · Accepted Answer · 2021-03-02 18:40:52Z

1

<tbody>
          <tr *ngFor="let data of dataContent">
                          {{data.id}}
                          {{data.name}}
                          {{data.stuff}}
          </tr>
      </tbody>

No need to use index and I here

Or if you want I you have to

<tbody>
          <tr *ngFor="let data of dataContent; let i = index">
                       <td>   {{data.id}}</td>  
                       <td>     {{data.name}}</td>  
                      <td>      {{data.stuff}}</td>  
          </tr>
      </tbody>

answered Mar 2, 2021 at 18:40

Hitech Hitesh

1,6351 gold badge11 silver badges18 bronze badges

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

Comments

Daniel Guzman · Accepted Answer · 2021-03-02 19:11:01Z

1

You don't need to access the index in this case, when you use *ngFor directive, you're looping dataContent and let data refers to one value in each iteration. Just:

<tr *ngFor="let data of dataContent">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td>
    <td>{{data.stuff}}</td>
</tr>

If you really need to use the index (for any other case), the issues is the index i part, correct it to index as i (notice the missing as)

<tr *ngFor="let data of dataContent; index as i">
    <td>{{data[i].id}}</td>
    ...
</tr>

Again, you don't need the index in this case, at least not for the portion of code you shared.

Learn more about *ngFor here.

answered Mar 2, 2021 at 19:11

Daniel Guzman

6863 silver badges9 bronze badges

Comments

Vishnudev Krishnadas · Accepted Answer · 2021-03-02 18:41:00Z

0

The HTML template needs to be corrected, data variable in the loop will hold one object in the array.

<tbody>
      <tr *ngFor="let data of dataContent">
          <td>{{data.id}}</td>
          <td>{{data.name}}</td>
          <td>{{data.stuff}}</td>
      </tr>
</tbody>

answered Mar 2, 2021 at 18:41

Vishnudev Krishnadas

11k2 gold badges29 silver badges58 bronze badges

Collectives™ on Stack Overflow

Angular and using a JSON from an API

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related