Nested divs from object javascript

Question

I have an object:

var data = {
    "lay": "h_m_f",
    "h": {
        "par": {
            "first_second": {
                "first": {
                    "module": {
                        "article": {
                            "archivclankyrubrika": "3",
                            "pocetclanku": "10"
                        }
                    }
                },
                "second": {
                }
            }
        },
        "next": {
            "one": {
                "val": {
                }
            },
        }
    },
}
};

I try to build html nested divs from this object. And if node doesn't has children then show inner text. But problem is that this script doesn't loop through children. In result I have only 2 divs.
Where is my problem guys? Thanks for answer. This is my script:

function create_node(obj){
    var node = document.createElement('div');
    node.setAttribute('class', Object.keys(obj)[0]);
    for (var i in obj) {
        node.appendChild(create_node(obj.i));
    }
    return node;
}
console.log(create_node(jsonTemplate));

Update: ideal result for me: every object is div with class before module. Module is the last div and cihldren's key of module show as a text.

<div class="h">
    <div class="par">
        <div class='first_second'>
            <div class="first">
                 <div class="module">
                     article
                 </div>
            </div>
            <div class="second">
            </div>
        </div>
     </div>
     <div class="next">
         <div class="one">
             <div class="val">
             </div>
         </div>
     </div>
</div>

@RoryMcCrossan like <div class="h"><div class="first_second"><div class="module">article</div></div></div> — Artie
– Artie, Commented Jan 25, 2018 at 8:23
Then what happens with par and first, archivclankyrubrika, 3? — trincot
– trincot, Commented Jan 25, 2018 at 8:27

Ori Drori · Accepted Answer · 2018-01-26 07:28:46Z

1

If a node is an object - iterate the children and append the results, if it's not - append the text:

var jsonTemplate = {"lay":"h_m_f","h":{"par":{"first_second":{"first":{"module":{"article":{"archivclankyrubrika":"3","pocetclanku":"10"}}},"second":{}}},"next":{"one":{"val":{}}}}};

function create_node(value, key){
    var node = document.createElement('div');
    node.setAttribute('class', key || '');
    
    if(key === 'module') {
      Object.keys(value).forEach(function(key) {
        node.appendChild(document.createTextNode(key || ''));
      })
      return node;
    }
    
    if(value && typeof value === 'object') {     
      for (var i in value) {
        node.appendChild(create_node(value[i], i));
      }
    }
    
    return node;
}

root.appendChild(create_node(jsonTemplate));

<div id="root"></div>

edited Jan 26, 2018 at 7:28

answered Jan 25, 2018 at 8:21

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

4 Comments

connexo Over a year ago

Be aware that null is an 'object', too.

Artie Over a year ago

@OriDrori Thank you, sir! I have a question. If I change key "second" to "first". That means now I have 2 keys "first". Why in result shows just one of them - last?

Ori Drori Over a year ago

Object property names should be unique. If you've got two properties with the same name. The 2nd one will override the 1st one. So you've actually got only 1 "first" in the object

Artie Over a year ago

@OriDrori Can I ask you. is it possible to do it in reverse. I mean from html build object? Thank you

Collectives™ on Stack Overflow

Nested divs from object javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related