为多级JSON树结构渲染HTML

Question

请帮助我为给定的json渲染html。

我需要一个递归函数来构建树结构。

鉴于Json是双向树。节点可以有多个树。但是每棵树只有左右两个节点。

Required Output Structure

{
  "tree_0":{
    "6629037861":{
      "tree_0":{
        "3669554975":{
          "tree_0":{
            "2039960559":false,"1328034918":false
          }
        },
        "3275450540":false
      }
    },
    "7652442898":{
      "tree_0":{
        "5586200617":{
          "tree_0":{
             "3265277560":false,"5222124962":false
          }
        },
        "4878276779":false
      }
    }
 },
 "tree_1":{
   "4521813934":{
     "tree_0":{
       "4437207316":false,
       "4034199320":false
     }
   },
   "8065858910":false
},
"tree_2":{
  "5350611753":false,
  "9257374001":false
},
"tree_3":{
   "8497444831":false,
   "8713068590":false
}
}

Answer 1

我不明白你在“左右两个节点”中究竟是什么意思，但我希望这个基本功能可以帮助你适应你的需求......

它在示例“treeObj”中使用的变量是您发布的完整json。

     function renderTree(tree) {
        var html = "<ul>";
        if( tree instanceof Object) {
            for(var i in tree) {
                html += "<li>" + i;
                html += renderTree(tree[i]);
                html += "</li>";
            }
        }
        else {
            html += "<li>" + tree + "</li>";
        }
        html += "</ul>";
        return html;
    }

    document.write(renderTree(treeObj));