How display object in angular?

Question

when I try to display a specific object from the backend, it displays it as [object Object], Angular code:

InstanceId : any ;
     ngOnInit() {

    this.services.getInstanceId().subscribe(data =>{
      console.log("datajson2 is : " + JSON.stringify(data));

      this.InstanceId = data;
      console.log("InstanceId is : " + InstanceId);
    
    } 
  }

json object is :

datajson2 is : {"case-id":"13","case-description":"vacation_Approval","case-owner":null,"case-status":1,"case-definition-id":"get_started.vacation_Approval","container-id":"get_started_1.0.0-SNAPSHOT","case-started-at":1609848097820,"case-completed-at":null,"case-completion-msg":"","case-sla-compliance":0,"case-sla-due-date":null,"case-file":null,"case-milestones":null,"case-stages":null,"case-roles":null}

error variable that should contains datajson2 :

InstanceId is : [object Object]

Use comma instead of plus: console.log("InstanceId is: ", InstanceId) — Barremian
– Barremian, Commented Jan 7, 2021 at 7:53
thank you Michael , its work but when I try to display it in Template as <td>{{ Instance Id.case-id}}</td> its gives me 'Nan' — Asma Alghamdi
– Asma Alghamdi, Commented Jan 7, 2021 at 7:58
The hyphen must be causing the issue. Use bracket notation to access the property instead: <td>{{ Instance Id["case-id"]}}</td> — Barremian
– Barremian, Commented Jan 7, 2021 at 8:03
thank you very much, Michael, could you please replay to my question as the answer not comment to mark it for others ? — Asma Alghamdi
– Asma Alghamdi, Commented Jan 7, 2021 at 8:07

anonymous · Accepted Answer · 2021-01-07 07:58:49Z

3

In your template use the pre tag and json pipe,

<pre> {{ InstanceId | json }} </pre>

answered Jan 7, 2021 at 7:58

anonymous

1,7312 gold badges23 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asma Alghamdi Over a year ago

thanks, it works but when I try to display it in Template as <td>{{ Instance Id.case-id}}</td> its gives me 'Nan'

anonymous Over a year ago

it means you already receive Instance Id.case-id as NAN

Barremian · Accepted Answer · 2021-01-07 08:14:42Z

0

1. Concatenate string and object in controller

You need to use comma instead of plus to log the object in the controller.

console.log("InstanceId is: ", InstanceId)

instead of

console.log("InstanceId is: " + InstanceId)

2. Render object property in the template

The hyphen in the property must obfuscate for the template rendered to access it. You could use bracket notation instead of dot notation here.

<td>{{ Instance Id["case-id"]}}</td>

instead of

<td>{{ Instance Id.case-id}}</td>

answered Jan 7, 2021 at 8:14

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Comments

Talha Akca · Accepted Answer · 2021-01-07 07:57:37Z

0

this.instanceId = JSON.parse(data); should do the trick

answered Jan 7, 2021 at 7:57

Talha Akca

4023 silver badges10 bronze badges

Collectives™ on Stack Overflow

How display object in angular?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related