Question

我有一个对象：

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

我尝试从这个对象构建html嵌套的div。如果节点没有子节点，则显示内部文本。但问题是这个脚本不会循环遍历孩子。结果我只有2个div 我的问题在哪里？谢谢你的回答。这是我的剧本：

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

更新：对我来说理想的结果：每个对象都是div之前的模块。模块是模块显示为文本的最后一个div和cihldren的键。

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

Answer 1

如果一个节点是一个对象 - 迭代子节点并附加结果，如果不是 - 附加文本：

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>

来自对象javascript的嵌套div

1 个答案: