How to solve Angular [object object] in template

Question

I am getting [object object] showing in my html page.

I am calling the a web service and in my console.log. I can see the full response but on my template I only see [object object]

test() {

 this.http.post('api...', JSON.stringify(this.getAllCaseInfoWithCAS)).subscribe(data => {  
  this.testData = [data];
 });

}

I have a ngFor

<ng-template ngbPanelContent>
 <div class="row" *ngFor="let item of testData">  
   {{item.getAllCaseInfoWithCASReturn.caseDetails}}
 </div>
</ng-template>

The response looks like this

{
    "getAllCaseInfoWithCASReturn": {
        "caseDetails": {
            "caseNumber": "12345",
            "componentDetails": {
                "component": "29"
            },
            "personNumber": "5",
            "month": "7"
        }
    }
}

How can I display all the information on the template?

try using {{item.getAllCaseInfoWithCASReturn.caseDetails.toString()}} — Sarthak Aggarwal
– Sarthak Aggarwal, Commented Nov 2, 2018 at 8:08
{{ item.getAllCaseInfoWithCASReturn.caseDetails | json }}. Also, read the guide about the HttpClient. You don't need to call JSON.stringify. HttpCLient does that for you, and sets the correct content-type header. — JB Nizet
– JB Nizet, Commented Nov 2, 2018 at 8:10
Why are you making the result as an array explicitly (this.testData = [data]), can you provide an example with more than one caseDetails if you have that? Also explain how you want to display the data. — sabithpocker
– sabithpocker, Commented Nov 2, 2018 at 8:15
@sabithpocker If I don't do [data] then I get this error "Cannot find a differ supporting object of type 'object'". I just want to display the data in a list(not important at the moment how it shows). I only have 1 case at this point in time. — RRB
– RRB, Commented Nov 2, 2018 at 8:18

Paritosh · Accepted Answer · 2018-11-02 08:10:08Z

4

You can use JsonPipe

{{ value_expression | json }}

Converts a value into its JSON-format representation. Useful for debugging.

{{ item.getAllCaseInfoWithCASReturn.caseDetails | json }}

answered Nov 2, 2018 at 8:10

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

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

Comments

sabithpocker · Accepted Answer · 2018-11-02 08:39:36Z

Better start by making JSON formatted as an array of caseDetails, here is a rough code of what you can do with current JSON:

// This should be refactored to a service file.
getCaseDetails(data: any): Observable<any[]> {
    const url = `api/url`;
    return this.httpClient.post(url, data)
        .pipe(
            map(result => result['getAllCaseInfoWithCASReturn']['caseDetails']),
            tap(caseDetail => console.log(caseDetail))
        )
}

test() {
    this.getCaseDetails(dummyData).subscribe(caseDetail => {
        this.testData = caseDetail;
    })
}

<ng-template ngbPanelContent>
 <div class="row">  
   {{testData?.caseNumber}} <!-- or json pipe -->
   {{testData?.personNumber}}
   {{testData?.month}}
   {{testData?.componentDetails?.component}}
 </div>
</ng-template>

Collectives™ on Stack Overflow

How to solve Angular [object object] in template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related