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
– Narendra Jadhav, Commented Apr 20, 2018 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
– Sergio Tulentsev, Commented Apr 20, 2018 at 11:55

epascarello · Accepted Answer · 2018-04-20 12:00:22Z

6

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.

edited Apr 20, 2018 at 12:00

answered Apr 20, 2018 at 11:55

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

distante · Accepted Answer · 2018-04-20 12:30:48Z

1

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);

edited Apr 20, 2018 at 12:30

answered Apr 20, 2018 at 11:56

distante

7,1016 gold badges63 silver badges106 bronze badges

Comments

kvetis · Accepted Answer · 2018-04-20 15:29:45Z

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, 2018 at 15:29

answered Apr 20, 2018 at 11:57

kvetis

7,4302 gold badges33 silver badges54 bronze badges

2 Comments

billy_56 Over a year ago

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?

kvetis Over a year ago

Yes. Because if you have "string" + object/array,/anything, the right part always get converted into string first.

Sazzad Hussain · Accepted Answer · 2018-04-20 11:56:32Z

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, 2018 at 11:56

Sazzad Hussain

3191 gold badge3 silver badges11 bronze badges

Comments

Umair Abid · Accepted Answer · 2018-04-20 12:09:19Z

0

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.

answered Apr 20, 2018 at 12:09

Umair Abid

1,4632 gold badges19 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related