How to make JavaScript objects more readable/navigable?

Question

I'm creating an object with a bunch of nested objects. When working with the web inspector, I'm constantly having to reorient myself because all of these objects are simply called Object. A condensed version of my object tree looks like this:

v Object
    v fields: Array[3]
        v 0: Object
            v fields: Array[2]
                v 0: Object
                    name: 'name'
                    placeholder: 'name'
                    tag: 'input'
                    type: 'text'
                > 1: Object
            name: 'name'
            tag: 'fieldset'
        > 1: Object
        > 2: Object
    name: 'name'

This gets old fast. Is there any way to make this more readable/navigable? If so, is it efficient? Like this:

v form
    v fields: Array[3]
        v 0: fieldset
            v fields: Array[2]
                v 0: input
                     name: 'name'
                     placeholder: 'name'
                     tag: 'input'
                     type: 'text'
                > 1: textarea
            name: 'name'
            tag: 'fieldset'
        > 1: fieldset
        > 2: button
    name: 'name'

Or is this just something I'm going to have to deal with?

Well, objects are `Object`s - afaik the inspector writes out the `.constructors` name. But I guess it doesn't make much sense to change your codebase just for easier debugging. — Bergi, Jun 20 '13 at 16:48
No, I'm making an object of a DOM tree to be manipulated server-side. — Marcus McLean, Jun 20 '13 at 16:48
@Marcus: Then just inspect the `JSON.stringify(tree, null, 4)` which you're doing anyway to send it. Or, actually you better would serialize the DOM tree to XML instead of JSON :-) — Bergi, Jun 20 '13 at 16:53
You are in luck.Read this http://stackoverflow.com/questions/16835451/javascript-prototypes-objects-constructori-am-confused — , Jun 20 '13 at 16:58

score 2 · Answer 1 · answered Jun 20 '13 at 16:45

2

If you would prefer to read plain text, you can console.log(JSON.stringify(your_object)).

answered Jun 20 '13 at 16:45

000

26,951
10
71
101

score 1 · Answer 2 · edited May 23 '17 at 10:32

1

Use a named function to create your objects:

  var a = {foo:"bar"};
  var b = new function myobj() {
    this.foo = "bar";
  }
  console.log(a,b); // Object, myobj

If you want reusable objects, you should use

  function myobj() {
    this.foo = "bar";
  }
  var objA = new myobj();
  var objB = new myobj();
  console.log(objA,objB); // myobj, myobj

If you want to dive deep into the differences, see this very detailed answer of TJ Crowder to my question.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 20 '13 at 16:47

Jan Turoň

31,451
23
125
169

How (in)efficient is doing that? – Marcus McLean Jun 20 '13 at 16:48
@Marcus: Of course it's much less efficient than just using Object literals, but you also gain inheritance. I wouldn't recommend it on pure *data* objects, though, which are parsed from simple JSON strings for example. – Bergi Jun 20 '13 at 16:57
@Bergi: As I studied the TJC answer, I would replace your *much* for *little*. – Jan Turoň Jun 20 '13 at 17:00
JSON it is for now, but this will come in handy later on. Thanks. – Marcus McLean Jun 20 '13 at 17:02
@JanTuroň: That answer is comparing efficiency of private-scoped variables with public properties - both created with a constructor. I meant that a constructor-less approach vs one with a function call – Bergi Jun 20 '13 at 17:03

score 1 · Accepted Answer · answered Jun 20 '13 at 17:01

To expand all properties automatically and not read Object or Array[l] everywhere, a common technique is to log the prettyfied JSON representation. It also has the benefit of not changing in the console when your objects are mutated after being logged. You only should not do it with very large objects, and it's impossible on cyclic objects.

console.log(JSON.stringify(tree, null, 4));

How to make JavaScript objects more readable/navigable?

3 Answers3