Joe Joe - 1 year ago 91
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

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>

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


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

could someone please help me figure this out?


Answer Source

You can use the pipe json to print an object inside the template:

  selector: 'json-pipe',
  template: `<div>
    <p>Without JSON pipe:</p>
    <p>With JSON pipe:</p>
    <pre>{{object | json}}</pre>
export class JsonPipeComponent {
  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download