0

I want to view a JSON object in the console log to see which attributes are missing or have incorrect values. When I try to simply:

console.log("my object: ", theObject);

I get the output:

theObject {id: "the id", name: "the name", type: "the type", ...} little blue console log "i"

with the tooltip of the blue "i" saying:

Value below was evaluated just now.

The JSON object that I have created, however, has more attributes than just 'id', 'name', and 'type'. For example, I want to view the 'label' attribute, but when I click the down arrow to view the rest of my attributes, nothing happens.

I have found that I can display the entire object by using

console.log("my object", JSON.stringify(theObject));

but that doesn't help me too much as the object is huge and nested, and I need to be able to see things with the color formatting since the project I'm working on prints out hundreds of objects at a time.

I have similarly tried

console.log("my object", ...{theObject});

because I thought I was printing out the pointer to the object rather than the object itself, and that at some point the actual object was being destroyed. This did not work. Please let me know if you know of a solution, and please provide constructive (and kind!) criticism to about this post as it is my first one.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
MCA
  • 98
  • 6
  • How are you viewing the console? What browser? Is it the integrated console or are you using something like codepen? – Rojo Dec 15 '20 at 17:11
  • Hi! It's just the Chrome console log. ctrl + shift + j to view it. Please reference the title of the question where I specified this! – MCA Dec 15 '20 at 17:12
  • My bad, I missed that. – Rojo Dec 15 '20 at 17:13
  • No worries! I appreciate your assistance in any way. – MCA Dec 15 '20 at 17:13
  • 1
    Try `JSON.stringify(obj, null, 4)`. Or [deep clone the object](https://stackoverflow.com/q/122102/1048572). – Bergi Dec 15 '20 at 17:14
  • @Bergi what are the two parameters 'null', and '4' doing? – MCA Dec 15 '20 at 17:15
  • 1
    @MCA https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#Syntax – Bergi Dec 15 '20 at 17:16
  • @Bergi - I tried your first solution `JSON.stringify(obj, null, 4)` and it just printed the string plus `null` `4` but did not turn the object into something readable with colored attributes. – MCA Dec 15 '20 at 17:19
  • How are you getting the object? – Rojo Dec 15 '20 at 17:19
  • @MCA Did you `console.log(JSON.stringify(obj), null, 4)` or `console.log(JSON.stringify(obj, null, 4))`? You're right there's no coloring, but it's readable. – Bergi Dec 15 '20 at 17:20
  • @Rojo Can you clarify what you are asking? I am creating the object in my angular service and then printing it in the console in Chrome. – MCA Dec 15 '20 at 17:21
  • So you are creating the object in javascript, not loading a .json file from somewhere else? – Rojo Dec 15 '20 at 17:21
  • @Bergi yep - I can already view the object as a string using JSON.stringify, but what I need is the coloring and the ability to expand/close attributes to visualize only the attributes I need. Just seeing the white text is not helpful, which is why I am asking this question! – MCA Dec 15 '20 at 17:22
  • @Rojo exactly, I am creating the object in javascript myself – MCA Dec 15 '20 at 17:22
  • Does this answer your question? [How to show full object in Chrome console?](https://stackoverflow.com/questions/4482950/how-to-show-full-object-in-chrome-console) – Rojo Dec 15 '20 at 17:23
  • @rojo I just tried that, it does not work and actually does not print in the Chrome console at all. – MCA Dec 15 '20 at 17:25
  • @MCA If you insist on logging it as an object, then you'll need to clone it (see the duplicate linked question). Notice that however you should probably also find the code that deletes the properties from your object and change it to create a new object instead, treating your logged object as immutable. – Bergi Dec 15 '20 at 17:25
  • @Bergi thank you so much, I appreciate it – MCA Dec 15 '20 at 17:26
  • 1
    Use a browser extension like JSONView or site like http://jsonviewer.stack.hu/, copy and paste the JSON from the console. – Heretic Monkey Dec 15 '20 at 17:26
  • 2
    Or, yet another (much better) alternative: don't do debugging by `console.log` but actually place a breakpoint on that line, then inspect the object before other code has a chance to mutate it. – Bergi Dec 15 '20 at 17:27
  • @HereticMonkey I am not allowed to post code anywhere as it is proprietary, but I'll keep that in mind for personal projects in the future! – MCA Dec 15 '20 at 17:28
  • @Bergi thank you, I will try that before I try the deep cloning and update here. – MCA Dec 15 '20 at 17:28

0 Answers0