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

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

• javascript
• json

• 1 use this console.log("Products array" , this.filteredSubProducts) it will show your array with – Narendra Jadhav Commented Apr 20, 2018 at 11:55
• 2 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 Commented Apr 20, 2018 at 11:55
• stringify is only needed for objects, not for arrays – mast3rd3mon Commented Apr 20, 2018 at 12:03

5 Answers 5

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 ma 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.

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 mands or adding a ma

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

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

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

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.