CODEWITHSUNDEEP
angular
CarlosMagalhaes
CarlosMagalhaes

Reputation: 91

Angular and using a JSON from an API

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

Upvotes: 0

Views: 45

Answers (3)

Daniel Guzman
Daniel Guzman

Reputation: 676

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.

Upvotes: 1

Vishnudev Krishnadas
Vishnudev Krishnadas

Reputation: 10970

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>

Upvotes: 0

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

<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>

Upvotes: 1

Related Questions