html table based upon json object tree

Question

I've got a dynamic json object that can contain different types of attributes and objects inside, could have plane strings or even arrays. I made a javascript code to convert a single JSON structure to an HTML table, worked great but id like to make it for a dynamic JSON, so basically I would need to iterate through the JSON tree parents and childs to see how do i create this HTML table.

But I do have some problems when trying to validate if a child has an object inside, like this: ( I don't want to add to many details to the JSON)

parent: {
    child_1: {
        attr1 : value1
    },
    child_2: {
          [{ attribues and values in an array }]
    }
}

How could I achieve this? I was thinking of using the "typeof" function like so:

if (typeof key === 'array') {
    // do something
}else{
    // do another stuff
}

But I don't believe it would work well, can you guys help me?

Thanks in advance.

I think it should work OK. Use a recursive function to build up the table. — Barmar, May 06 '13 at 19:40
@Barmar can you help me by giving me an example please? i was thinking about that too, since every 'array' i find, i will create a "linkable" row to add another pop up for all that data :( — msqar, May 06 '13 at 19:41
Try to write it yourself, then someone will help you fix it. I don't have an example handy. — Barmar, May 06 '13 at 19:43
`typeof key` will return "object" for arrays, thus `typeof key === 'array'` will always be false — Vadim, May 06 '13 at 19:43
How to check if an object is an array: http://stackoverflow.com/questions/4775722/javascript-check-if-object-is-array — Cᴏʀʏ, May 06 '13 at 19:52

Vadim · Accepted Answer · 2013-05-06T20:06:31.443

4

Checking typeof key === 'array' is incorrect since for arrays typeof will return "object". You can try to use instanceof instead:

if (key instanceof Array) {
    // do something
} else {
    // do another stuff
}

But this will fail if your JSON was created in another frame. Another option is to check toString()

Object.prototype.toString.call(key).indexOf('Array') > 0

or to check

Array.isArray(key)

but it does not supported by all browsers.

Description of typeof you can see here https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/typeof

edited May 06 '13 at 20:06

answered May 06 '13 at 19:48

Vadim

8,701
4
43
50

See [here](http://stackoverflow.com/questions/4775722/javascript-check-if-object-is-array) for reasons why `instanceof` doesn't always work. – Cᴏʀʏ May 06 '13 at 19:53
Bad choice to use indexOf("Array"), what if the object is a Typed Array, eg Int32Array – Xotic750 May 06 '13 at 20:05
@Xotic750 OP mentioned that original object is JSON. According to JSON spec http://www.json.org/ it may contain only plain arrays (not typed) – Vadim May 06 '13 at 20:09
I think you will find he is talking about a plain javascript object, like his example, and really not talking about JSON. http://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation – Xotic750 May 06 '13 at 20:11

html table based upon json object tree

1 Answers1