Angular 8 Show HTTP response with the right data. ([object Object]) [duplicate]

Question

In my current Angular project I send a JSON file to a server and the server gives me back a modified JSON file. The new JSON file should be displayed in a tree.

My current problem is that I cannot read the data from the new JSON. Whenever I want to display a JSON Object, I always get the error:

[object Object]

Post request:

public sendJSON() {
    this.http.post('url', this.combineJSON,{headers:{'Content-Type': 'application/json'}}).subscribe((data: Device) => {

    console.log("Test Output: " + data);
  })
}

I defined a model to work with the response:

export class Device {
    orderNumber: number;

    deviceTypeId: number;

    swRevision: string;

    hwRevision: string;
}

Where is the problem here that the data is not displayed correctly?

Answer 1

The data not being correctly displayed is because of the + in your console.log.

+ concatenates strings and, in the case of something other than a string, calls the toString() method of the object.

Simply change:

console.log("Test Output: " + data);

to:

console.log("Test Output: ", data);

and it should display your object.

Answer 2

You are trying to print a whole object. You can utilize JSON.stringify() function to display your object as a string.

console.log("Test Output: " + JSON.stringify(data));

The model you defined helps you to identify all properties of data object in your source code. As an example you could print the swRevision property with:

console.log("Test Output: " + data.swRevision);