Generating structured HTML from JSON object

Question

I'm trying to come up with the best way to generate a table from the below JSON object:

mytable=[
    {div:{
        nested:[
            {table:{
                nested:[
                    {thead:{
                        nested:[
                            {tr:{
                                nested:[
                                    {th:{}},
                                    {th:{}},
                                    {th:{}}
                                ]}}
                        ]
                    }},
                    {tbody:{}}
                ]}}
        ]}}
];

The end result would generate the HTML elements and be structured like so:

<div>
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

My logic is to check if the the object has the property nested if so generate the element and continue to loop, however I can't figure out how to do the bind the child elements back to the parents at the same time.

You dont need to return the table built inside the json. Just return the data and build the html with javascript — Vitor Rigoni
– Vitor Rigoni, Commented Mar 18, 2016 at 19:52
@VitorRigoni I know what your saying but thats not what I'm looking for, I want to use a more dynamic approach using a loop to speed up development. — Jordan Davis
– Jordan Davis, Commented Mar 18, 2016 at 19:55
Your JSON is not valid. You have a problem with your nested th. Plus, what have you tried? — cl3m
– cl3m, Commented Mar 18, 2016 at 19:56
Just an idea but you could turn your json into a xml (there are many tools for this) and you would have instant html :) — Yann Chabot
– Yann Chabot, Commented Mar 18, 2016 at 19:57

fedeghe · Accepted Answer · 2016-03-18 20:37:31Z

1

this does the work:

var mytable = /* your json */

function toHTML(j, n) {

    n = n || document.createDocumentFragment('div');
    for (var i = 0, o, l = j.length; i < l; i++) {
        for (var tag in j[i]) {
            o = document.createElement(tag);
            n.appendChild(o);
            'nested' in j[i][tag] && toHTML(j[i][tag].nested, o);
        }
    }
    return n;
}
var res = toHTML(mytable);

// now append it where needed
document.body.appendChild(res);

answered Mar 18, 2016 at 20:37

fedeghe

1,31714 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jordan Davis Over a year ago

You sir are a beast! I love the shorthand to. If you live in the SF Bay Area and need a job we will def hire you :)

fedeghe Over a year ago

thx @JordanDavis, for the moment I'm ok in Switzerland...never say never! ;)

Jordan Davis Over a year ago

@fedeghe I'm looking for an OOP way to do the same thing but for server responses you got anything? stackoverflow.com/questions/36581180/…

fedeghe Over a year ago

@JordanDavis, since your question is a bit vague I refer to the link to the other one... I've worked a lot on that and the answer I gave here is just a hyperdistilled version of that github.com/fedeghe/widgzard ... worth a look, hope helps... Btw is not clear why You say 'for server responses'... Why should matter from where the json comes from?

Jordan Davis Over a year ago

@fedeghe I posted a link to the bottom of that comment

|

Collectives™ on Stack Overflow

Generating structured HTML from JSON object

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related