Why do I need to use sometimes JSON.stringify and sometimes not

Question

Sometimes in my project I'm using an JSON.Stringify to read data when I'm loging values to console, and sometimes I dont need to do it.. I'm wondering why?

In this example:

 this._productServices.getAll().do(data => console.log(data)).subscribe(products=> this.articles= products);

And when I look at the console, there are values like this:

(4) [{…}, {…}, {…}, {…}]

Acctualy there is readable array of values.

But in this case:

  filteredSubProducts: Group[];

 filterSubProductsByIdId(Id) {
    this.filteredSubProducts= this.articles.filter(item => item.parentId == Id);
    console.log("Products array" + this.filteredSubProducts);
  }

I get results as :

Products array[object Object],[object Object]

So I need to use JSON.stringify() in seconds case to get my values [object Object],[object Object] readable.. and I'm wondering why is that? Sometimes I'm using it and sometimes I'm not..

Thanks

use this `console.log("Products array" , this.filteredSubProducts) ` it will show your array with — Narendra Jadhav, Apr 20 '18 at 11:55
Because `console.log` knows how to print arrays/objects nicely. But in your second example, you force your array into its string representation (by concatenating it to a string). So a default string representation is used. If you want specific string representation, take care of it yourself (`JSON.stringify` or whatnot) — Sergio Tulentsev, Apr 20 '18 at 11:55

epascarello · Answer 1 · 2018-04-20T12:00:22.883

You are getting it because you are adding a string "Products array" to an Array filteredSubProducts.

So the code is actually doing

console.log("Products array" + this.filteredSubProducts.toString());

The toString() method is causing the [object Object].

The way around it is to not concatenate, but use a comma in the console.log statement

console.log("Products array", this.filteredSubProducts)

Now it will allow you to show it without using JSON.stringify()

Now what is great about JSON.stringify() is it will give you the snapshot at that time. There are times when you change the array, object and it shows up in the console as the wrong value do to lazy evaluation. The stringify, causes it to be evaluated and you see it at that moment in time.

distante · Answer 2 · 2018-04-20T12:30:48.813

Because if you try to place an Object with a string Chrome will not parse the contents. If you need to "say" something before write an object or array to console you have to do it in two console commands or adding a comma

var myArray = [{content:"hola"}, {content:"hello"},{content:"hallo"}];

console.log("This does not work " + myArray);

console.log("This will work just ok");
console.log(myArray);

console.log("this works too" , myArray);

score 0 · Answer 3 · answered Apr 20 '18 at 11:56

0

If you convert you response to JSON in your service, Then you have to stringify when you want to use that response.

res => res.json() // In this case you will need to use stringify

answered Apr 20 '18 at 11:56

Sazzad Hussain

321
1
3
11

kvetis · Accepted Answer · 2018-04-20T15:29:45.357

0

This is because you are joining together a string "Products array" with an object with .toString() - another string. What you see in console is string. Otherwise whole object gets logged. Try

console.log("Products array", this.filteredSubProducts);

Edit: Just removing the toString() does not do the trick, because everything that is after "string" + ... gets converted to string first.

// does not work
console.log("Products array" + this.filteredSubProducts);

That behaviour is called type coercion and you can read about it in this SO answer, in this article or just google it google it for more info

edited Apr 20 '18 at 15:29

answered Apr 20 '18 at 11:57

kvetis

6,682
1
28
48

even if I didn't add .toString() JS did itself because I added string there "Produts array" so it tries to convert whole array this.filteredSubProducts to a string also? by applying .toString() method? – billy_56 Apr 20 '18 at 13:09
Yes. Because if you have "string" + object/array,/anything, the right part always get converted into string first. – kvetis Apr 20 '18 at 15:24

score 0 · Answer 5 · answered Apr 20 '18 at 12:09

console.log() only works till 2nd level of nesting, for example if I run console.log({}, {}, {}), all of the objects in array will appear without any obfuscation, however if I try to log

console.log([
  {},
  {},
  {a: {
    a: {
      a: {}
    }
  }}
])

The result will be something like [ {}, {}, { a: { a: [Object] } } ]

You can still view the objects by expanding them in any decent browsers console but terminals don't have that facility, so in order to view the nested items we use JSON.stringify() to convert the object and its children to string which can then be easily printed but you might have noticed they loosed their indentation in that way, because you are basically printing a string.

Why do I need to use sometimes JSON.stringify and sometimes not

5 Answers5