CODEWITHSUNDEEP
angular
SS_FStuck
SS_FStuck

Reputation: 241

Displaying data in a table using angular 5

I'm trying to display data in a table I got the part from HTML working because I use to keep it empty and data will be shown when I do a search I want to change that to display data when I load the page and the table will be full.

this is my service : userservice.ts : 

public getUserss() {
    return this.http.get('http://localhost:8081' + '/users');
}

users.component.ts: this is where I need to implement the code: it's wrong

ngOnInit(): void {
    this.userservice.getUserss().subscribe();
}

the table that I want to display is a html table not material table : 

  <table class="table table-striped">
  <tr>
    <th>ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Username</th>
    <th>Password</th>
    <th>Role</th> <th colspan="2">Actions</th>
  </tr>
  <tr *ngFor="let u of pageUsers?.content">
    <td>{{u.id}}</td>
    <td>{{u.nom}}</td>
    <td>{{u.prenom}}</td>
    <td>{{u.email}}</td>
    <td>{{u.username}}</td>
    <td>{{u.password}}</td>
    <td>{{u.role}}</td>
    <td>
      <button style="color: #4CAF50;" class="glyphicon glyphicon-pencil" (click)="onEditUser(u.id)" ></button>
    </td>
    <td>
      <button style="color: red;" class="glyphicon glyphicon-trash" (click)="deleteuser(u)" ></button>
    </td>
  </tr>
</table>

I just want to know how to change my service and my component to display data on init

JSON

[
  {
    "id": 1,
    "nom": "SBOUI",
    "prenom": "sameh",
    "email": "[email protected]",
    "username": "sameh",
    "password": "sameh",
    "role": "admin"
  },
  {
    "id": 3,
    "nom": "ORANGE",
    "prenom": "",
    "email": "[email protected]",
    "username": "OrangeIP",
    "password": "orange140",
    "role": "client"
  },
  {
    "id": 37,
    "nom": "try2name",
    "prenom": "try2 ",
    "email": "[email protected]",
    "username": "try158",
    "password": "zkndgkji",
    "role": "client"
  }
]

Upvotes: 2

Views: 7561

Answers (3)

Divneet
Divneet

Reputation: 718

You need to incorporate async pipe in your HTML code. This is because your data is asynchronous and you do not save it in a variable in your ts after subscribing to it.

So HTML does not know that this data would be available after a delay. Hence use the async pipe.

<table class="table table-striped">
      <tr>
        <th>ID</th>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Username</th>
        <th>Password</th>
        <th>Role</th> <th colspan="2">Actions</th>
      </tr>
      <tr *ngFor="let u of (pageUsers | async).content">
        <td>{{u.id}}</td>
        <td>{{u.nom}}</td>
        <td>{{u.prenom}}</td>
        <td>{{u.email}}</td>
        <td>{{u.username}}</td>
        <td>{{u.password}}</td>
        <td>{{u.role}}</td>
        <td>
          <button style="color: #4CAF50;" class="glyphicon glyphicon-pencil" (click)="onEditUser(u.id)" ></button>
        </td>
        <td>
          <button style="color: red;" class="glyphicon glyphicon-trash" (click)="deleteuser(u)" ></button>
        </td>
      </tr>
    </table>

Upvotes: 1

Anuradha Gunasekara
Anuradha Gunasekara

Reputation: 6983

You are getting an array for the response. So you can do just like this.

  public ngOnInit(): void {
      this.userService.getUsers().subscribe(users => {
            this.pageUsers = users;
      });
   }

<table class="table table-striped">
  <tr>
    <th>ID</th>
    <th>Last Name</th>
    <th>First Name</th>
    <th>Email</th>
    <th>Username</th>
    <th>Password</th>
    <th>Role</th> <th colspan="2">Actions</th>
  </tr>
  <tr *ngFor="let u of pageUsers">
    <td>{{u.id}}</td>
    <td>{{u.nom}}</td>
    <td>{{u.prenom}}</td>
    <td>{{u.email}}</td>
    <td>{{u.username}}</td>
    <td>{{u.password}}</td>
    <td>{{u.role}}</td>
    <td>
      <button style="color: #4CAF50;" class="glyphicon glyphicon-pencil" (click)="onEditUser(u.id)" ></button>
    </td>
    <td>
      <button style="color: red;" class="glyphicon glyphicon-trash" (click)="deleteuser(u)" ></button>
    </td>
  </tr>
</table>

change let u of pageUsers?.content to let u of pageUsers

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222522

You need to assign the values

this.userService.getUsers().subscribe(users => {
        this.pageUsers = users;
});

Upvotes: 1

Related Questions