Parsing Json that contains name value pairs in Angular 9

Question

I'm wanting to simply display each entry as a row in a html table, currently i get the following

Id id:1

taskFields:[object Object],[object Object], [object Object]

Instead i want to be able to see the values hidden in the object Object

I have an angular template of

<tr *ngFor="let entry of entries | keyvalue">
  <td>{{entry.key}}:{{entry.value}}</td>
</tr>

In my component.ts file i have

ngOnInit():void{
  this.entries = this.testService.getData().pipe((result) =>{
    return result
  }

In my testService i have

getData() : Observable<TestEntry[]>{
return this.httpClient.get<TestEntry[]>(this.baseUrl + '/api/Test'/)
.pipe(
  catchError(error => {throw err;})
   );
}

this returns the following data

{"id":1,"testFields":[{"name":"test_id","value":"12345"},{"name":"testCategory", "value":"testAngular"}, {"name":"testUndefined", "value":""}]}

My TestEntry is

export interface TestEntry{
  id:string
  testFields:TestFields
}

My TestFields is

export interface TestFields{
  name:string
  value:string
}

Answer 1

You need to iterate over the value if it is an array. Use the following:

<table>
    <tr *ngFor="let entry of entries | keyvalue">
        <td>{{entry.key}}</td>

        <!-- If value is array iterate over it-->
        <ng-container *ngIf="entry.value && entry.value.length > 0; else obj">
            <td *ngFor="let inner of entry.value">{{inner.name}} : {{inner.value}}</td>
        </ng-container>

        <!-- If value is object display it-->
        <ng-template #obj>
            <td>{{entry.value}}</td>
        </ng-template>
    </tr>
</table>