Vue JS returning [Object object] on console.log and Undefined on JSON.parse

Question

So I am writing this Vue.JS code to display a data aquired by PHP from a server. The PHP returns a JSON object to the Vue and the VUE has to display it. My current code is:

  axiosPost();
}
function axiosPost()
{
 axios.post(
  './ConversationGetter.php',
  {
    function2call: 'getRecord',
    id: 1,
    access: this.accesstoken
  }

)
.then(response =>  {this.data=response.data;
console.log(response.data);
console.log("Response From VUE JS"+this.data);

})
.catch(error => {});
}

The Problem is, First console.log prints the Response data properly. But the second console.log displays the this:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

If I use JSON.parse while displaying the data, it shows this:

undefined

because console.log('some string' + [someObject, someObject, etc]) coerces the array of objects in this.data to be an array of strings, and objects as strings become 'object Object' - i.,e ignore the second console.log, it is completely as expected, the data is correct - use console.log('some string', [someObject, someObject, etc]) ... notice the , instead of the + ... and your console.log will be what you expected in the first place — Jaromanda X
– Jaromanda X, Commented Dec 20, 2019 at 5:25
@PrabhjotSinghKainth - the content is completely and utterly irrelevant — Jaromanda X
– Jaromanda X, Commented Dec 20, 2019 at 5:27

Siva Kondapi Venkata · Accepted Answer · 2019-12-20 05:36:08Z

6

"+" operator converting as string in second console statement. Please change it to "," as below?

console.log("Response From VUE JS", this.data);

edited Dec 20, 2019 at 5:36

answered Dec 20, 2019 at 5:28

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

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

Comments

Mohamed Farouk · Accepted Answer · 2019-12-20 05:26:04Z

1

You do not need JSON.parse .. Just use response.data direct. If you want to see actual data use console.log(JSON.stringify(response.data))

answered Dec 20, 2019 at 5:26

Mohamed Farouk

1,1175 silver badges10 bronze badges

2 Comments

Shri Over a year ago

JSON.stringify still returns [Object object]

Mohamed Farouk Over a year ago

If this is a webapi response, you can view structure in Network tab of the browser to inspect response structure or just console.log(response.data)

Collectives™ on Stack Overflow

Vue JS returning [Object object] on console.log and Undefined on JSON.parse

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related