2069

How do I display the content of a JavaScript object in a string format like when we alert a variable?

The same formatted way I want to display an object.

9
  • 7
    Would you please reword your question? What do you mean by "formatted way"? As in, with rich formatting, like bold/italic/etc? Jun 5, 2009 at 19:03
  • is there a way to display the runtime value of a variable by printing the value of the variable using some console commands? Aug 3, 2015 at 6:54
  • 1
    @BlackPanther Just do console.log("", yourObject1, yourObject2, yourObject3, etc...);. A shorter version is to just do console.log(yourObject1, yourObject2, etc...);. Jul 31, 2017 at 11:52
  • Like this console.log('a string', aNumber, anObject)
    – onmyway133
    Oct 15, 2018 at 11:58
  • 1
    Some tips: You can use colors to have a better view of: console.log('%c Sample Text', 'color:green;'); Or add some VAR in the text using: console.log(`Sample ${variable}`, 'color:green;'); Jan 29, 2019 at 11:34

40 Answers 40

2422

Use native JSON.stringify method. Works with nested objects and all major browsers support this method.

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

Link to Mozilla API Reference and other examples.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

Use a custom JSON.stringify replacer if you encounter this Javascript error

"Uncaught TypeError: Converting circular structure to JSON"
14
  • 3
    JSON.stringify can only show a small subset of javascript values, and will throw an exception for the rest - console.log does not have this problem. Oct 1, 2013 at 13:46
  • 12
    If you are a newbie like me, don't forget console.log i.e. console.log(JSON.stringify(obj,null, 4));
    – nilesh
    Dec 30, 2013 at 3:49
  • 2
    "Uncaught TypeError: Converting circular structure to JSON" when ob=window.
    – Michael
    Jan 13, 2014 at 23:04
  • 5
    I had cases where it did not work : it showed {} for a non-empty object. So be sure to check with console.log(obj) before thinking your object is empty when strigify() returns {}.
    – Sindarus
    Aug 9, 2016 at 14:31
  • 3
    > In Node.js, you can use util.inspect(object). It automatically replaces circular links with "[Circular]". ----- credit: Erel Segal-Halevi in that JSON.stringify replacer link
    – DaveLak
    Dec 19, 2017 at 5:16
1336

If you want to print the object for debugging purposes, use the code:

var obj = {
  prop1: 'prop1Value',
  prop2: 'prop2Value',
  child: {
    childProp1: 'childProp1Value',
  },
}
console.log(obj)

will display:

screenshot console chrome

Note: you must only log the object. For example, this won't work:

console.log('My object : ' + obj)

Note ': You can also use a comma in the log method, then the first line of the output will be the string and after that, the object will be rendered:

console.log('My object: ', obj);
28
  • 44
    That function also works on Google Chrome when using the JavaScript Console (Shift+Control+J or Shift+Control+I, depending on the Chrome version). Also note that console.log(obj1, obj2) works very nicely, too, so you don't have to call console.log() for every object when logging multiple variables. Also, always remember to remove all such calls in production, as it will break browsers that do not implement it (such as Internet Explorer).
    – Felix
    Apr 22, 2010 at 9:31
  • 104
    Yes it prints [object Object] but it has a little expando-toggly button beside it that lets you inspect the contents of the object.
    – hughes
    Jul 5, 2011 at 13:46
  • 12
    @hughes it actually can do both. i have an object i created with: var obj = { "foo" : false }; and another object that is being passed into a callback from a server, the one passed through the callback prints with the little arrow so you can open it up, the statically created one just prints [object Object] with no arrow. I'm trying to figure this out too, any other thoughts?
    – benstraw
    Jul 8, 2011 at 0:08
  • 130
    console.log("id:"+obj); won't output correctly as it outputs a string as you see it there, you need to specify it like this: console.log("id:"); console.log(obj); Mar 5, 2013 at 11:06
  • 21
    Try console.log(JSON.stringify(obj)) or console.dir(obj)
    – Robot Boy
    Jun 3, 2015 at 7:53
421
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);
4
  • 1
    This is what exactly i want. I am using google maps v3 and the directionrenderer returns an object. That has four items and in that one objects name keeps changing so we need to find that. For that this method really helped. Besides this way we can get all the names of the properties and objects. Or is there any other way to find the names of the objects and properties? Apr 28, 2011 at 14:08
  • 3
    You probably want to mask out the built in cruft with hasOwnProperty most of the time.
    – John
    Apr 20, 2012 at 0:58
  • 1
    A little late finding this, but as it got requested on my birthday last year (29th aug), here is a working fiddle. jsfiddle.net/MrMarlow/fq53o6o9
    – MrMarlow
    Sep 11, 2015 at 11:06
  • This is an old and pretty terrible answer. It doesn't recurse at all, doesn't indent, uses var and alert etc. Oct 5, 2022 at 19:48
144

console.dir(object):

Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.

Note that the console.dir() feature is non-standard. See MDN Web Docs

3
  • 1
    Yes this is a good solution, however it only works as exptected if you want to log only the object (e.g. console.dir(obj)). In case you want to concatenate a sting to the output, it'll give you [object Object].
    – Zoman
    Jan 23, 2019 at 16:58
  • 2
    A massive advantage of console.dir is that you can still expand and read the values in your console after the variable has been garbage collected. This is described in another SO article here
    – Dawson B
    Apr 6, 2020 at 19:12
  • 1
    And one more advantage of console.dir is that when you save console to file, all properties are in file as expected. That doesn't happen when using console.log only.
    – Kepi
    May 21, 2020 at 0:11
107

Try this:

console.log(JSON.stringify(obj))

This will print the stringify version of object. So instead of [object] as an output you will get the content of object.

6
  • 12
    typeerror: Converting circular structure to JSON? Oct 18, 2015 at 23:37
  • @KaidenPrince see this answer for your error: stackoverflow.com/questions/4816099/… It is likely a DOM element in your object. If that's the case, you're best attempting to just log to the console in chrome or firefox and inspect there. Otherwise you'd have to strip out all circular elements before the JSON.stringify is called in order for it to work.
    – Ace Hyzer
    Oct 28, 2015 at 20:55
  • Solution is to simply split into 2 separate commands believe it or not: console.log("id:"); console.log(obj); Mar 28, 2017 at 21:57
  • 1
    JSON.stringify does not understand Map
    – andrej
    May 4, 2021 at 7:21
  • Is this somehow different from the top answer given 5 years earlier? If so, please explain and I'll undo my downvote. Oct 5, 2022 at 19:49
68

Well, Firefox (thanks to @Bojangles for detailed information) has Object.toSource() method which prints objects as JSON and function(){}.

That's enough for most debugging purposes, I guess.

1
  • 1
    Your link to Object.toSource() now redirects to Object.prototype.toString() - mdn doesn't have anything on toSource as far as I can tell.
    – sc3000
    Mar 26 at 16:40
51

If you want to use alert, to print your object, you can do this:

alert("myObject is " + myObject.toSource());

It should print each property and its corresponding value in string format.

1
  • 25
    toSource() doesn't work in non-gecko browsers (e.g. Chrome, Safari)
    – Yarin
    Mar 7, 2011 at 18:59
45

If you would like to see data in tabular format you can use:

console.table(obj);

Table can be sorted if you click on the table column.

You can also select what columns to show:

console.table(obj, ['firstName', 'lastName']);

You can find more information about console.table here

0
40

Function:

var print = function(o){
    var str='';

    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }

    return str;
}

Usage:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

Example:

http://jsfiddle.net/WilsonPage/6eqMn/

3
  • Print method call the browser to print the page to pdf :p May 31, 2015 at 22:42
  • @jsh you should turn the if-else around and check for object instead of only string. updated fiddle: jsfiddle.net/6eqMn/594 Feb 15, 2016 at 16:01
  • 1
    @wilsonpage This is failing if I add integer value to tel property :(
    – ni3
    Aug 23, 2017 at 9:20
39

In NodeJS you can print an object by using util.inspect(obj). Be sure to state the depth or you'll only have a shallow print of the object.

0
34

Simply use

JSON.stringify(obj)

Example

var args_string = JSON.stringify(obj);
console.log(args_string);

Or

alert(args_string);

Also, note in javascript functions are considered as objects.

As an extra note :

Actually you can assign new property like this and access it console.log or display it in alert

foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);
2
  • 1
    The question itself states: "Like when we 'alert' a variable", so that's not really an answer. And also your other option "JSON.stringify(obj)" has already been mentioned in "Nov 27 2010", you're only cluttering this question with duplicates and non-answers. Your point about assigning new properties is also senseless in this context.
    – Paul
    Dec 11, 2018 at 15:34
  • Is this materially different from the top answer given 5 years earlier? If so, please explain and I'll undo my downvote. Oct 5, 2022 at 19:49
24

Here's a way to do it:

console.log("%o", obj);
3
  • In the context of Chrome-dev-tool, google did mentioned this in this link. referring to the section "String substitution and formatting"
    – chaco
    Jun 15, 2018 at 9:30
  • I saw it in mdn docs. Jun 15, 2018 at 12:35
  • I routinely use the following as a debug statement. console.log("id-str %o",{obj1:obj1,obj2:obj2,...}); The debug window identifies each object and I can drill down on those that are interesting. Jan 15, 2022 at 21:52
24

NB: In these examples, yourObj defines the object you want to examine.

First off my least favorite yet most utilized way of displaying an object:

This is the defacto way of showing the contents of an object

console.log(yourObj)

will produce something like : enter image description here

I think the best solution is to look through the Objects Keys, and then through the Objects Values if you really want to see what the object holds...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

It will output something like : enter image description here (pictured above: the keys/values stored in the object)

There is also this new option if you're using ECMAScript 2016 or newer:

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

This will produce neat output : enter image description here The solution mentioned in a previous answer: console.log(yourObj) displays too many parameters and is not the most user friendly way to display the data you want. That is why I recommend logging keys and then values separately.

Next up :

console.table(yourObj)

Someone in an earlier comment suggested this one, however it never worked for me. If it does work for someone else on a different browser or something, then kudos! Ill still put the code here for reference! Will output something like this to the console : enter image description here

3
  • Would you expand the example to include Object and obj. Dec 28, 2018 at 23:30
  • not sure I understand the comment, but I added differing names for objects that should have a name. object was not explicit enough. May 17, 2019 at 18:13
  • console.table(yourObj) worked for me on Google Chrome Version 77.0.3865.90 (Official Build) (64-bit). Thanks for sharing!
    – Devner
    Oct 4, 2019 at 15:59
23

To print the full object with Node.js with colors as a bonus:

console.dir(object, {depth: null, colors: true})

Colors are of course optional, 'depth: null' will print the full object.

The options don't seem to be supported in browsers.

References:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

https://nodejs.org/api/console.html#console_console_dir_obj_options

0
19

Use this:

console.log('print object: ' + JSON.stringify(session));
18

As it was said before best and most simply way i found was

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}
1
  • This is the easiest and fastest solution, however it doesn't work on big objects such as navigator.
    – someguy234
    Dec 4, 2014 at 0:30
15

(This has been added to my library at GitHub)

Reinventing the wheel here! None of these solutions worked for my situation. So, I quickly doctored up wilsonpage's answer. This one is not for printing to screen (via console, or textfield or whatever). It does work fine in those situations and works just fine as the OP requested, for alert. Many answers here do not address using alert as the OP requested. Anyhow, It is, however, formatted for data transport. This version seems to return a very similar result as toSource(). I've not tested against JSON.stringify, but I assume this is about the same thing. This version is more like a poly-fil so that you can use it in any environment. The result of this function is a valid Javascript object declaration.

I wouldn't doubt if something like this was already on SO somewhere, but it was just shorter to make it than to spend a while searching past answers. And since this question was my top hit on google when I started searching about this; I figured putting it here might help others.

Anyhow, the result from this function will be a string representation of your object, even if your object has embedded objects and arrays, and even if those objects or arrays have even further embedded objects and arrays. (I heard you like to drink? So, I pimped your car with a cooler. And then, I pimped your cooler with a cooler. So, your cooler can drink, while your being cool.)

Arrays are stored with [] instead of {} and thus dont have key/value pairs, just values. Like regular arrays. Therefore, they get created like arrays do.

Also, all string (including key names) are quoted, this is not necessary unless those strings have special characters (like a space or a slash). But, I didn't feel like detecting this just to remove some quotes that would otherwise still work fine.

This resulting string can then be used with eval or just dumping it into a var thru string manipulation. Thus, re-creating your object again, from text.

function ObjToSource(o){
    if (!o) return 'null';
    var k="",na=typeof(o.length)=="undefined"?1:0,str="";
    for(var p in o){
        if (na) k = "'"+p+ "':";
        if (typeof o[p] == "string") str += k + "'" + o[p]+"',";
        else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+",";
        else str += k + o[p] + ",";
    }
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

Let me know if I messed it all up, works fine in my testing. Also, the only way I could think of to detect type array was to check for the presence of length. Because Javascript really stores arrays as objects, I cant actually check for type array (there is no such type!). If anyone else knows a better way, I would love to hear it. Because, if your object also has a property named length then this function will mistakenly treat it as an array.

EDIT: Added check for null valued objects. Thanks Brock Adams

EDIT: Below is the fixed function to be able to print infinitely recursive objects. This does not print the same as toSource from FF because toSource will print the infinite recursion one time, where as, this function will kill it immediately. This function runs slower than the one above, so I'm adding it here instead of editing the above function, as its only needed if you plan to pass objects that link back to themselves, somewhere.

const ObjToSource=(o)=> {
    if (!o) return null;
    let str="",na=0,k,p;
    if (typeof(o) == "object") {
        if (!ObjToSource.check) ObjToSource.check = new Array();
        for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
        ObjToSource.check.push(o);
    }
    k="",na=typeof(o.length)=="undefined"?1:0;
    for(p in o){
        if (na) k = "'"+p+"':";
        if (typeof o[p] == "string") str += k+"'"+o[p]+"',";
        else if (typeof o[p] == "object") str += k+ObjToSource(o[p])+",";
        else str += k+o[p]+",";
    }
    if (typeof(o) == "object") ObjToSource.check.pop();
    if (na) return "{"+str.slice(0,-1)+"}";
    else return "["+str.slice(0,-1)+"]";
}

Test:

var test1 = new Object();
test1.foo = 1;
test1.bar = 2;

var testobject = new Object();
testobject.run = 1;
testobject.fast = null;
testobject.loop = testobject;
testobject.dup = test1;

console.log(ObjToSource(testobject));
console.log(testobject.toSource());

Result:

{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}}
({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})

NOTE: Trying to print document.body is a terrible example. For one, FF just prints an empty object string when using toSource. And when using the function above, FF crashes on SecurityError: The operation is insecure.. And Chrome will crash on Uncaught RangeError: Maximum call stack size exceeded. Clearly, document.body was not meant to be converted to string. Because its either too large, or against security policy to access certain properties. Unless, I messed something up here, do tell!

11
  • Crash prone. Try ObjToSource(document.body), for example. Dec 28, 2012 at 22:34
  • ok, I found the issue. I was not checking for null valued objects. That is fixed now. But, you still cant do ObjToSource(document.body) because of infinite recursion. Even document.body.toSource() in FireFox returns an empty object. Dec 28, 2012 at 23:35
  • @BrockAdams - There now its fixed for infinite recursion, however document.body is still not printable. See NOTE. Dec 29, 2012 at 1:57
  • document.body was just a shortcut to pointing out some big problems. You've now fixed the worst of those and I already upvoted. (Although, I do believe that a different approach could handle document.body. Most of the answers here would not do well against it either.) Dec 29, 2012 at 2:17
  • Well, if you (or anyone else) got any ideas of how to get past the fact that such a large object will fill up the stack during recursion or bypass security restrictions. I would love to hear it. Thanks for the vote! Dec 29, 2012 at 2:21
14

If you would like to print the object of its full length, can use

console.log(require('util').inspect(obj, {showHidden: false, depth: null})

If you want to print the object by converting it to the string then

console.log(JSON.stringify(obj));

1
  • you would need to add the JSON.stringify when you try to concatenate with a string object. If you use console.log(object), it should pretty print the contents of the object Aug 1, 2017 at 22:36
11

I needed a way to recursively print the object, which pagewil's answer provided (Thanks!). I updated it a little bit to include a way to print up to a certain level, and to add spacing so that it is properly indented based on the current level that we are in so that it is more readable.

// Recursive print of object
var print = function( o, maxLevel, level ) {
    if ( typeof level == "undefined" ) {
        level = 0;
    }
    if ( typeof level == "undefined" ) {
        maxLevel = 0;
    }

    var str = '';
    // Remove this if you don't want the pre tag, but make sure to remove
    // the close pre tag on the bottom as well
    if ( level == 0 ) {
        str = '<pre>';
    }

    var levelStr = '';
    for ( var x = 0; x < level; x++ ) {
        levelStr += '    ';
    }

    if ( maxLevel != 0 && level >= maxLevel ) {
        str += levelStr + '...</br>';
        return str;
    }

    for ( var p in o ) {
        if ( typeof o[p] == 'string' ) {
            str += levelStr +
                p + ': ' + o[p] + ' </br>';
        } else {
            str += levelStr +
                p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>';
        }
    }

    // Remove this if you don't want the pre tag, but make sure to remove
    // the open pre tag on the top as well
    if ( level == 0 ) {
        str += '</pre>';
    }
    return str;
};

Usage:

var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        tel: '123456789'
    }  
}

// Recursive of whole object
$('body').append( print(pagewilsObject) ); 

// Recursive of myObject up to 1 level, will only show name 
// and that there is a contact object
$('body').append( print(pagewilsObject, 1) ); 
0
9

You can also use ES6 template literal concept to display the content of a JavaScript object in a string format.

alert(`${JSON.stringify(obj)}`);

const obj  = {
  "name" : "John Doe",
  "habbits": "Nothing",
};
alert(`${JSON.stringify(obj)}`);

1
  • This doesn't really any value beyond the JSON.stringify answer given in 2010. The syntax looks more cryptic than alert(JSON.stringify(obj));, and template literals are beyond the scope of the question. Oct 5, 2022 at 19:54
6

I always use console.log("object will be: ", obj, obj1). this way I don't need to do the workaround with stringify with JSON. All the properties of the object will be expanded nicely.

6

Another way of displaying objects within the console is with JSON.stringify. Checkout the below example:

var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
5

Javascript Function

<script type="text/javascript">
    function print_r(theObj){ 
       if(theObj.constructor == Array || theObj.constructor == Object){ 
          document.write("<ul>") 
          for(var p in theObj){ 
             if(theObj[p].constructor == Array || theObj[p].constructor == Object){ 
                document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); 
                document.write("<ul>") 
                print_r(theObj[p]); 
                document.write("</ul>") 
             } else { 
                document.write("<li>["+p+"] => "+theObj[p]+"</li>"); 
             } 
          } 
          document.write("</ul>") 
       } 
    } 
</script>

Printing Object

<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);
</script> 

via print_r in Javascript

1
  • I'm not sure if this is a bug in the js.do example I'm using, but this only seems to output the first full "branch" of the tree. ie it follows the first reference of the first reference... ad infinitum
    – Jon Story
    Feb 12, 2015 at 12:47
5
var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

where object is your object

or you can use this in chrome dev tools, "console" tab:

console.log(object);

2
  • I think your answer is incomplete. (not me that cause downvote) This, yet, only print the key..
    – Abdillah
    Apr 22, 2015 at 9:13
  • 1
    thanks for your answer, it has inspired me to do this: console.log(Object.keys(object)); while I know that only prints the properties keys, it is enough to me for my purposes ;)
    – Wilson
    Aug 5, 2015 at 15:17
5

Assume object obj = {0:'John', 1:'Foo', 2:'Bar'}

Print object's content

for (var i in obj){
    console.log(obj[i], i);
}

Console output (Chrome DevTools) :

John 0
Foo 1
Bar 2

Hope that helps!

5

I prefer using console.table for getting clear object format, so imagine you have this object:

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

And you will you see a neat and readable table like this below: console.table

4

Circular references solution

To make string without redundant information from object which contains duplicate references (references to same object in many places) including circular references, use JSON.stringify with replacer (presented in snippet) as follows

let s = JSON.stringify(obj, refReplacer(), 4);

function refReplacer() {
  let m = new Map(), v= new Map(), init = null;

  return function(field, value) {
    let p= m.get(this) + (Array.isArray(this) ? `[${field}]` : '.' + field); 
    let isComplex= value===Object(value)
    
    if (isComplex) m.set(value, p);  
    
    let pp = v.get(value)||'';
    let path = p.replace(/undefined\.\.?/,'');
    let val = pp ? `#REF:${pp[0]=='[' ? '$':'$.'}${pp}` : value;
    
    !init ? (init=value) : (val===init ? val="#REF:$" : 0);
    if(!pp && isComplex) v.set(value, path);
   
    return val;
  }
}




// ---------------
// TEST
// ---------------

// gen obj with duplicate references
let a = { a1: 1, a2: 2 };
let b = { b1: 3, b2: "4" };
let obj = { o1: { o2:  a  }, b, a }; // duplicate reference
a.a3 = [1,2,b];                      // circular reference
b.b3 = a;                            // circular reference


let s = JSON.stringify(obj, refReplacer(), 4);

console.log(s);
alert(s);

This solution based on this (more info there) create JSONPath like path for each object value and if same object occurs twice (or more) it uses reference with this path to reference that object e.g. #REF:$.bar.arr[3].foo (where $ means main object) instead 'render' whole object (which is less redundant)

BONUS: inversion

function parseRefJSON(json) {
  let objToPath = new Map();
  let pathToObj = new Map();
  let o = JSON.parse(json);
  
  let traverse = (parent, field) => {
    let obj = parent;
    let path = '#REF:$';

    if (field !== undefined) {
      obj = parent[field];
      path = objToPath.get(parent) + (Array.isArray(parent) ? `[${field}]` : `${field?'.'+field:''}`);
    }

    objToPath.set(obj, path);
    pathToObj.set(path, obj);
    
    let ref = pathToObj.get(obj);
    if (ref) parent[field] = ref;

    for (let f in obj) if (obj === Object(obj)) traverse(obj, f);
  }
  
  traverse(o);
  return o;
}



// ------------
// TEST
// ------------

let s = `{
    "o1": {
        "o2": {
            "a1": 1,
            "a2": 2,
            "a3": [
                1,
                2,
                {
                    "b1": 3,
                    "b2": "4",
                    "b3": "#REF:$.o1.o2"
                }
            ]
        }
    },
    "b": "#REF:$.o1.o2.a3[2]",
    "a": "#REF:$.o1.o2"
}`;

console.log('Open Chrome console to see nested fields');
let obj = parseRefJSON(s);
console.log(obj);

3

A little helper function I always use in my projects for simple, speedy debugging via the console. Inspiration taken from Laravel.

/**
 * @param variable mixed  The var to log to the console
 * @param varName string  Optional, will appear as a label before the var
 */
function dd(variable, varName) {
    var varNameOutput;

    varName = varName || '';
    varNameOutput = varName ? varName + ':' : '';

    console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')');
}

Usage

dd(123.55); outputs:
enter image description here

var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj'); 

enter image description here

0
3

The console.log() does a great job of debugging objects, but if you are looking to print the object to the page content, here's the simplest way that I've come up with to mimic the functionality of PHP's print_r(). A lot these other answers want to reinvent the wheel, but between JavaScript's JSON.stringify() and HTML's <pre> tag, you get exactly what you are looking for.

var obj = { name: 'The Name', contact: { email: '[email protected]', tel: '123456789' }};
$('body').append('<pre>'+JSON.stringify(obj, null, 4)+'</pre>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2

i used pagewil's print method, and it worked very nicely.

here is my slightly extended version with (sloppy) indents and distinct prop/ob delimiters:

var print = function(obj, delp, delo, ind){
    delp = delp!=null ? delp : "\t"; // property delimeter
    delo = delo!=null ? delo : "\n"; // object delimeter
    ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects
    var str='';

    for(var prop in obj){
        if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){
          var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings
          str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;
        }else{
          str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;
        }
    }
    return str;
};
1
  • It is very sloppy.
    – posfan12
    Feb 21, 2020 at 1:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.