Angular 9 : List user details on GUI

Viewed 432

I want to list users registered on a page using angular.

API response:

{
  "message": "User list is fetched successfully",
  "result": [
    {
      "firstName": "xcvbn",
      "lastName": "fvbnm",
      "domain": "hgj"
    },
    {
      "firstName": "wdD",
      "lastName": "DWQ",
      "domain": "hDWgj"
    },
    {
      "firstName": "GH",
      "lastName": "J",
      "domain": "RF"
    },
    {
      "firstName": "D",
      "lastName": "F",
      "domain": "K"
    }
  ],
  "status": true,
  "responseCode": "200"
}

I'm able to get API-reponse but unable to show the list on the UI. This is my component.html class which i created for listing down the user list

**component.html**

    <div class="container">
    <div class="container">
    <div class="container">
        <div class="row col-md-6 col-md-offset-2 custyle">
        <table class="table table-striped custab">
        <thead>
            <tr>
                <th>Frist Name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of users">
                <td>{{user.firstName}}</td>
                <td>{{user.lastName}}</td>
              </tr>
        </tbody>
        </table>
        </div>
    </div>
1 Answers

Try changing your html to

<div class="container">
    <div class="container">
    <div class="container">
        <div class="row col-md-6 col-md-offset-2 custyle">
        <table class="table table-striped custab">
        <thead>
            <tr>
                <th>Frist Name</th>
                <th>Last name</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of users.result">
                <td>{{user.firstName}}</td>
                <td>{{user.lastName}}</td>
              </tr>
        </tbody>
        </table>
        </div>
    </div>
Related