How can I display a JavaScript object

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

It seems that a simple for   in can t solve the problem especially when we want to tackle apart from custom  host   native or CSSOM objects  Besides  we are talking about debugging here and who knows when and where we ll need it   My small library can handle objects like this one       obj2          foo    bar           loop2   obj2                              another   obj1                         a1   1                         b1    baz                          loop1   obj1                                                            c1   true                         d1                              e1    1 2 3    and present them colorful and with identation like   0  foo   bar 0  loop2   contains a circular reference to object at index 0 0  another   object 1  a1  11  b1   baz 1  loop1   contains a circular reference to object at index 2 1  c1   true 1  d1    1  e1   1 2 3   but see there    https   github com centurianii jsdebug http   jsfiddle net centurianii 92Cmk 36    With some precautions even document body is parsed

User · Answer

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

User · Answer

It will not work in a browser and you might only need this in case you want to get valid JS representation for your object and not a JSON  It just runs node inline evaluation   var execSync   require  child process   execSync  const objectToSource    obj    gt    execSync  node -e   console log JSON parse      JSON stringify obj               encoding   utf8      console log objectToSource   a  1

User · Answer

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

User · Answer

As it was said before best and most simply way i found was   var getPrintObject function object        return JSON stringify object

User · Answer

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

User · Answer

Here s function   function printObj obj    console log  function traverse tab  obj        let str           if typeof obj      object             return obj                  if Array isArray obj                         return       obj map o  gt JSON stringify o   join                             str   str      n       for var p in obj            str   str   tab         p           traverse tab      obj p      n             str   str slice 0 -2    str slice -1                       str   str   tab             return str       obj  slice 0 -1        It can show object using tab indent with readability

User · Answer

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

User · Answer

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     x000D   x000D  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  amp  amp  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   x000D   x000D   x000D   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  x000D   x000D  function parseRefJSON json      let objToPath   new Map      let pathToObj   new Map      let o   JSON parse json        let traverse    parent  field    gt        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   x000D   x000D   x000D

User · Answer

Here s a way to do it   console log   o   obj

User · Answer

Function   var print   function o       var str          for var p in o           if typeof o p      string                str   p          o p      lt  br gt             else              str   p         lt  br gt     print o p                               return str      Usage   var myObject         name   Wilson Page       contact            email   wilson hotmail com           tel   123456789                body   append  print myObject       Example   http   jsfiddle net WilsonPage 6eqMn

User · Answer

var output       for  var property in object      output    property          object property          alert output

User · Answer

A simple way to show the contents of the object is using console log as shown below  console log  Object contents are    obj     Please note that I am not using     to concatenate the object  If I use     than I will only get the string representation if object  something like  Object object

User · Answer

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      var obj    field1   xyz   field2  2016   dd obj   My Cool Obj

User · Answer

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

User · Answer

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

User · Answer

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   gt        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 lt 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

User · Answer

You may use my function   Call this function with an array or string or an object it alerts the contents   Function   function print r printthis  returnoutput        var output            if   isArray printthis     typeof printthis      object             for var i in printthis                output    i           print r printthis i   true      n                  else           output    printthis            if returnoutput  amp  amp  returnoutput    true            return output       else           alert output             Usage  var data    1  2  3  4   print r data

User · Answer

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  lt pre gt  tag  you get exactly what you are looking for   x000D   x000D  var obj     name   The Name   contact    email   thename gmail com   tel   123456789         body   append   lt pre gt   JSON stringify obj  null  4    lt  pre gt     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

If you re looking for something that can return a prettified string of any javascript object  check out https   github com fresheneesz beautinator   An example   var result   beautinator    font-size    26px   font-family     Open Sans   sans-serif  color   white   overflow   hidden  padding   4px 4px 4px 8px  Text    display   block   width   100    text-align    center    padding-left    2px   word-break    break-word     console log result    Results in      font-size    26px      font-family     Open Sans   sans-serif     color   white   overflow   hidden     padding   4px 4px 4px 8px     Text    display   block   width   100               text-align    center    padding-left    2px              word-break    break-word          It even works if there are functions in your object

User · Answer

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

User · Answer

In ES2015  using the shorthand property declaration syntax for object literals  you can log objects while also concisely preserving your variable names   console log  bwib    bwib   bwab    bwab   bwob   bwob     old way A console log  bwib  bwib  bwab  bwab  bwob  bwob            old way B  console log  bwib  bwab  bwob                              ES2015  way

User · Answer

Javascript Function   lt script type  text javascript  gt      function print r theObj           if theObj constructor    Array    theObj constructor    Object              document write   lt ul gt               for var p in theObj                 if theObj p  constructor    Array    theObj p  constructor    Object                    document write   lt li gt    p      gt    typeof theObj    lt  li gt                      document write   lt ul gt                     print r theObj p                     document write   lt  ul gt                    else                    document write   lt li gt    p      gt    theObj p    lt  li gt                                             document write   lt  ul gt                       lt  script gt    Printing Object   lt script type  text javascript  gt  print r JAVACRIPT ARRAY OR OBJECT    lt  script gt     via print r in Javascript

User · Answer

Use this   console log  print object      JSON stringify session

User · Answer

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

User · Answer

Try this one   var object   this window  console log object  this is window object      Output

User · Answer

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

User · Answer

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     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      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   gt  console log  key   e   value   yourObj e         This will produce neat output     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

User · Answer

Another modification of pagewils code    his doesn t print out anything other than strings and leaves the number and boolean fields blank and I fixed the typo on the second typeof just inside the function as created by megaboss   var print   function  o  maxLevel  level         if   typeof level     undefined                  level   0            if   typeof maxlevel     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     lt pre gt         can also be  lt pre gt             var levelStr     lt br gt        for   var x   0  x  lt  level  x                   levelStr                 all those spaces only work with  lt pre gt             if   maxLevel    0  amp  amp  level  gt   maxLevel                 str    levelStr        lt br gt            return str             for   var p in o                 switch typeof o p                       case  string             case  number          tostring   gets automatically applied           case  boolean        ditto             str    levelStr   p          o p       lt br gt                break             case  object         this is where we become recursive           default              str    levelStr   p         lt br gt     print  o p   maxLevel  level   1     levelStr      lt  br gt                break                          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      lt  pre gt         also can be  lt  pre gt            return str

User · Answer

You can also use ES6 template literal concept to display the content of a JavaScript object in a string format   alert    JSON stringify obj         x000D   x000D  const obj      x000D     name     John Doe   x000D     habbits    Nothing   x000D     x000D  alert    JSON stringify obj      x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

If you re looking for an inliner for Node js    console log  quot  o quot   object

User · Answer

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

[javascript] How can I display a JavaScript object?

Examples related to javascript

Examples related to serialization

Examples related to javascript-objects