Joe Joe - 2 months ago 18
TypeScript Question

cant print an object list in html

Object {0: Object, 1: Object, 2: Object, 3: Object, 4: Object, httpStatus: 200, httpStatusText: null, httpBodyText: "[object Object],[object Object],[object Object],[object Object],[object Object]"}

0:Object (example of object i opened to show content)
CountryInitials : "US"
Id: "101"
CountryName: "United States"
Population: 318.9
__proto__:
Object
1:Object
2:Object
3:Object
4:Object


this is an example from my browser that shows how im receiving the data, so its a object that contains objects, and I want to treat it in the html like its an array, and i thought it is but its not working....

this is the html:

<div *ngFor="#obj of myList>
<div><b>Country ID:</b> {{obj.Id}} <b>Country Name:</b> {{obj. CountryName}}}</div>
</div>


and its not working...I dont know why, i just want to present a list of the objects with country id and country name..

the EXCEPTION:

EXCEPTION: Error trying to diff '[object Object]' in [myList in EntityBulkCmp@32:31]


could someone please help me figure this out?

thanks!

Answer

You can use the pipe json to print an object inside the template: https://angular.io/docs/ts/latest/api/common/index/JsonPipe-pipe.html

@Component({
  selector: 'json-pipe',
  template: `<div>
    <p>Without JSON pipe:</p>
    <pre>{{object}}</pre>
    <p>With JSON pipe:</p>
    <pre>{{object | json}}</pre>
  </div>`
})
export class JsonPipeComponent {
  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
}