How do I iterate a Http response object as Key Value pair?

Question

I have a below response from HTTP

getEmployee(id: number){
    this.empservice.getEmployee(id)
      .subscribe({
      next:(res)=>{
        this.obj = res;
      },
      error:(err)=>{
        alert("Error getting the employee");
        console.warn(err);
      }
    })
  }

I want to iterate the response in to a HTML Table or MAT table.

<table mat-table [dataSource]="obj">
        <tbody>
            <tr data-ng-repeat="(key, val) in obj[0]">
                <th>
                    {{ key }}
                </th>
                <td data-ng-repeat="row in obj">
                    {{ rowSource[key] }} 
                </td>
            </tr>
        </tbody>
      </table>

Below is the response object that i get from API

{
    "employeeID": 999,
    "firstName": "Peter",
    "lastName": "Scotch",
    "phone": "8878767654",
    "email": "kumar@yahoo.com",
}

What is your question? Are you just wanting to know how to generically display properties of an object in an angular template? — mhodges, Apr 21 '22 at 14:42
Does this answer your question? [How to loop over object properties with ngFor in Angular](https://stackoverflow.com/questions/45819123/how-to-loop-over-object-properties-with-ngfor-in-angular) — mhodges, Apr 21 '22 at 14:43

score 1 · Answer 1 · answered Apr 21 '22 at 14:57

1

you can use a plain for (x in obj) { } loop:

    const user  = {
    "employeeID": 999,
    "firstName": "Peter",
    "lastName": "Scotch",
    "phone": "8878767654",
    "email": "kumar@yahoo.com",
}

for (let key in user) {
    if (user.hasOwnProperty(key)) {
        console.log(key + " : " + user[key]);
    }
}

answered Apr 21 '22 at 14:57

meher

61
1
9

Thanks meher, i want to bind the output in html table and the order of the fields should be same. I think browser sorts the keys alphabetically – Sam K Apr 21 '22 at 16:42
users = { "employeeID": 999, "firstName": "Peter", "lastName": "Scotch", "phone": "8878767654", "email": "kumar@yahoo.com", } myArr = [this.users]; – meher Apr 22 '22 at 16:14
employee ID firstName lastName phone email {{user.employeeID}} {{user.firstName}} {{user.lastName}} {{user.phone}} {{user.email}} – meher Apr 22 '22 at 16:17

score 0 · Accepted Answer · answered Apr 21 '22 at 14:46

0

const testObj = {
    "employeeID": 999,
    "firstName": "Peter",
    "lastName": "Scotch",
    "phone": "8878767654",
    "email": "kumar@yahoo.com",
};

// 1 way
Object.entries(testObj).forEach(x => {

   let key = x[0]
   let value = x[1];
})

// 2 way 
Object.keys(testObj).forEach(key => {
  let value = testObj[key];
})

If you want to iterate it in html-table, try:

<table>
    <thead>
        <tr>
            <th>Key</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let key of Object.keys(obj)">
            <td>{{key}}</td>
            <td>{{obj[key]}}</td>
        </tr>
    </tbody>
</table>

answered Apr 21 '22 at 14:46

Mykyta Halchenko

720
1
3
21

Thank you. It gives an error Property 'Object' does not exist on type 'EmployeeComponent'. Sorry i am very new to Angular – Sam K Apr 21 '22 at 14:52
replace your subscribe to `.subscribe({ next:(res)=>{ this.obj = Object.keys(res); }, error:(err)=>{ alert("Error getting the employee"); console.warn(err); } })` – Mykyta Halchenko Apr 21 '22 at 14:55
I see one problem.. the order of the key is not maintained. is there any way to fix that? – Sam K Apr 21 '22 at 16:03

How do I iterate a Http response object as Key Value pair?

2 Answers2