htmlangularjsonplaceholder

Angular write data lines dynamically to a table


In my project I getting the data from JSONPlaceholder - Users
I'm new in Angular, so if you find something stupid in the way I get the data please warn me.

dataFromServer;
constructor(private http: HttpClient){
  this.dummyPromise.then(
    response => {
      console.log("response from dummy promise:", response);
      this.dataFromServer = response;
    },
    error => {
      console.log("Error happened with dummy promise:", error)
    }
  )
}

dummyPromise = new Promise((resolve, reject) => {
  this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(data => {
    console.log(data);
    this.dataFromServer = data;
  });
  //resolve(returnData);
});

Problem is, in my HTML file, I write the data into a table like this:

<tr *ngIf="dataFromServer">
  <td>{{dataFromServer[0].id}}</td>
  <td>{{dataFromServer[0].name}}</td>
  <td>{{dataFromServer[0].username}}</td>
  <td>{{dataFromServer[0].email}}</td>
</tr>
<tr *ngIf="dataFromServer">
  <td>{{dataFromServer[1].id}}</td>
  <td>{{dataFromServer[1].name}}</td>
  <td>{{dataFromServer[1].username}}</td>
  <td>{{dataFromServer[1].email}}</td>
</tr>

... for all the 10 people. I want to do it dynamically, as many lines as many people's data I get.


Solution

  • I think that you should try to use *ngFor instead of *ngIf. I will give you an example.

    <tr *ngFor="let data of dataFromServer">
     <td>{{data.id}}</td>
    <td>{{data.name}}</td> 
    <td>{{data.username}}</td>
    <td>{{data.email}}</td> 
    </tr>
    

    So, it will repeat for every object in your dataFromServer