Javascript 从JSON动态添加DIV

我正在尝试基于JSON文件动态构建一个树形图

基本代码如下所示：

var arrayFinalChartData = [{
    "1": "2",
        "id": "4d344e35-d8b1-49ec-c564-759639816704",
        "parentid": "rootDiv"
}, {
    "3": "4",
        "id": "951de378-b191-498e-b31f-7250e6a7ef1f",
        "parentid": "rootDiv"
}, {
    "OS": "WINDOW",
        "id": "15d332c3-613d-4aee-8d17-b731c682f242",
        "parentid": "951de378-b191-498e-b31f-7250e6a7ef1f"
}];


$('#loadChart').click(function () {
    //console.log("arrayFinalChartData:" + (JSON.stringify(arrayFinalChartData));
    // build chart

    $(arrayFinalChartData).each(function (i, obj) {

        //console.log(arrayFinalChartData[i].id);
        //console.log(arrayFinalChartData[i].parentid);


        //Retrieve the innerHTML

        itemStringDetails = JSON.stringify(obj);
        var mySubString = "";

        for (n = 0; n < 3; n++) {

            var partString = itemStringDetails.split(',')[n];

            console.log("partString :" + partString);

            if ((partString.indexOf('id', 0) == -1) && (partString.indexOf('parentid', 0) == -1)) {

                var mySubString = partString;
                console.log("mySubString :" + mySubString);
            };


        };


        itemHTML = mySubString.replace("{", '');

        console.log("itemHTML:" + itemHTML);  



            $('#buildTree').append('div').addClass("newDIV").attr('id', arrayFinalChartData[i].id).html(itemHTML).data("parentid", arrayFinalChartData[i].parentid);


        //console.log(this.parentid);
    });
});

完整的HTML和JS可从以下网址获得：

注意：每个div都有一个ID和ParentID。父ID后面的层次结构

---

所有Div都必须保留JSON中的属性，以便在保存时获得相同的JSON。请注意，1:2…5:6恰好是相应Div的innerHTML。内容可以是-OS:window。版本：XP等…它将是网络设备的图表

您可以执行以下操作：

if (arrayFinalChartData[i].parentid == "rootDiv")
    $("#buildTree").append("<div id='" + arrayFinalChartData[i].id + "'>It's here</div>");
else
    $("#" + arrayFinalChartData[i].parentid)
    .append("<div id='" + arrayFinalChartData[i].id + "'>It's here</div>")

UPD：如果希望按级别更改利润率

function recBuild(tree, seed, level) {
        var i, 
            arr = tree[seed],
            len = arr.length,
            //output html is a array of chars. That is the fastest way
            //to concatenate strings
            frag = [];
        for (i = 0; i < len; i++) {
            //make sequence of divs with current parent id
            frag.push("<div style='margin-left:" + (level*10) + "px' id='" + arr[i].id + "'>" + getContent(arr[i]));
            //if current id is someone's parent id, then make subtree
            if (tree[arr[i].id] !== undefined) {
                frag.push(recBuild(tree, arr[i].id, level + 1));
            }
            frag.push("</div>");
        }
        //convert array to string
        return frag.join('');
    }

    root.append(recBuild(tree, 'rootDiv', 0));

不带jquery的Upd2

'use strict';

var data = [{
    "1": "2",
        "id": "4d344e35-d8b1-49ec-c564-759639816704",
        "parentid": "rootDiv"
}, {
    "3": "4",
        "id": "951de378-b191-498e-b31f-7250e6a7ef1f",
        "parentid": "rootDiv"
}, {
    "5": "6",
        "id": "15d332c3-613d-4aee-8d17-b731c682f242",
        "parentid": "951de378-b191-498e-b31f-7250e6a7ef1f"
}],
root = document.getElementById('tree'),
key,
tree = {},
tmp;
/*
    {
        id1: [array of object woth this parent id],
        id2: ...
    }
*/
for (key in data) {
    if (data.hasOwnProperty(key)) {
        tmp = data[key];
        if (tree[tmp.parentid] === undefined) {
            tree[tmp.parentid] = [];
        }
        tree[tmp.parentid].push(data[key]);
    }
}
console.log(tree);
//as structure of json is very strange
function getContent(node) {
    var key;
    for (key in node) {
        return node[key];
    }
}

function recBuild(tree, seed, level) {
    var i, 
        arr = tree[seed],
        len = arr.length,
        //output html is a array of chars. That is the fastest way
        //to concatenate strings
        frag = [];
    for (i = 0; i < len; i++) {
        //make sequence of divs with current parent id
        frag.push("<div style='margin-left:" + (level*10) + "px' id='" + arr[i].id + "'>" + getContent(arr[i]));
        //if current id is someone's parent id, then make subtree
        if (tree[arr[i].id] !== undefined) {
            frag.push(recBuild(tree, arr[i].id, level + 1));
        }
        frag.push("</div>");
    }
    //convert array to string
    return frag.join('');
}

root.innerHTML = (recBuild(tree, 'rootDiv', 0));

使用jQuery的递归解决方案。进一步提问

尝试以下解决方案：

---

---

1:2是多少？为什么不为所有对象使用相同的字段？例如{IDNWHATIST:[1，2]，…此变量来自何处？有多少层次结构：有限还是未知？生成的html应该是什么样子？编辑。我们如何将所有3个DIv添加到各自的父级？@Ivan Ivanov 1:2或OS:Window等…将是新生成DIv的innerHTML。这些层次将取决于提供的JSON每个DIV都有ID、innerHTML和Parentid。@Arun HTML看起来像一个组织结构图。该结构图将基于json在层次上加深，其中每个DIV将由ID、Parentid和innerHTML定义。我们需要将所有新DIV添加到wgich中，这是HTML的一部分。我们还将从Json1:2…e中获取每个新DIV的innerHTMLtc带有一个名为itemHTML的变量。是否希望在构建树中添加parentid为rootDiv的JSON中的Div？是的。id为15d332c3-613d-4aee-8d17-b731c682f242的Div将是id为951de378-b191-498e-b31f-7250E6A7EF1F的Div的子代。那么我的代码正是您所需要的，不是？我想我们需要一个通用的父子代在构建树时使用sed方法。代码只是一个示例。它可以达到任何级别。所有DIV都有ID、innerHTML和ParentID。ParentID为rootDiv的DIV将是级别1 rootDiv作为根或级别0。它们都需要具有JSON中定义的属性。我们需要以DIV的ParentID作为roo启动树tDiv.两个div不能有相同的id。我编辑它，如果你想有parentid，你应该学会使用word属性，你真的很困惑，对于重复的，你过滤日期，这样就不会有重复的id。很抱歉混淆。按照我的理解，应该有两个兄弟姐妹的公共parentid，然后第三个作为第二个o的孩子ne.是的，是的。有些div有两个兄弟，其中id=tree，第三个是第二个div的子树。是否可以对div进行样式化并将innerHTML设置为1:2…以使图表清晰？我的意思是我们可以使用虚拟根以便级别变得清晰？此时，第二个和第三个div在视觉上似乎是第一个div的子级。还需要保持AtJSON中各自Div的属性，如它们的ID、innerHTML和ParentID，以便稍后检索以进行保存。请参阅UPD，有级别。级别作为递增参数传递给每个函数调用。您正确地注意到了，我特意使用1:2表示这不是真正的键值对。而ID和ParentID是正确的键值对irs，1:2只是任意内容的内容占位符，如Div的innerHTML。用户可能有OS:WINDOW或maxTemp:30…或类似的内容。从这个意义上说，它是任意的，我们需要从json中提取它，并用作相应Div的innerHTML。

'use strict';

var data = [{
    "1": "2",
        "id": "4d344e35-d8b1-49ec-c564-759639816704",
        "parentid": "rootDiv"
}, {
    "3": "4",
        "id": "951de378-b191-498e-b31f-7250e6a7ef1f",
        "parentid": "rootDiv"
}, {
    "5": "6",
        "id": "15d332c3-613d-4aee-8d17-b731c682f242",
        "parentid": "951de378-b191-498e-b31f-7250e6a7ef1f"
}],
root = document.getElementById('tree'),
key,
tree = {},
tmp;
/*
    {
        id1: [array of object woth this parent id],
        id2: ...
    }
*/
for (key in data) {
    if (data.hasOwnProperty(key)) {
        tmp = data[key];
        if (tree[tmp.parentid] === undefined) {
            tree[tmp.parentid] = [];
        }
        tree[tmp.parentid].push(data[key]);
    }
}
console.log(tree);
//as structure of json is very strange
function getContent(node) {
    var key;
    for (key in node) {
        return node[key];
    }
}

function recBuild(tree, seed, level) {
    var i, 
        arr = tree[seed],
        len = arr.length,
        //output html is a array of chars. That is the fastest way
        //to concatenate strings
        frag = [];
    for (i = 0; i < len; i++) {
        //make sequence of divs with current parent id
        frag.push("<div style='margin-left:" + (level*10) + "px' id='" + arr[i].id + "'>" + getContent(arr[i]));
        //if current id is someone's parent id, then make subtree
        if (tree[arr[i].id] !== undefined) {
            frag.push(recBuild(tree, arr[i].id, level + 1));
        }
        frag.push("</div>");
    }
    //convert array to string
    return frag.join('');
}

root.innerHTML = (recBuild(tree, 'rootDiv', 0));

$('#loadChart').click(function () {
  var i = arrayFinalChartData.length;
var counter = 0;
$(arrayFinalChartData).each(function (i, obj) {

    if(obj.parentid === "rootDiv"){
        $('#buildTree').append('<div id="'+obj.id+'" parentid ="'+obj.parentid+'">Parent id:'+obj.parentid+'</div>');
    }
    counter++;
});
 if(counter === i){
 $(arrayFinalChartData).each(function (i, obj) {
if(obj.parentid !== "rootDiv"){

var result = $.grep(arrayFinalChartData, function(e){ return obj.parentid == e.id; });

       if (typeof result !== 'undefined' && result.length > 0) {
            $('#'+result[0].id+'').append('<div id="'+obj.id+'" parentid ="'+obj.parentid+'">Child id:'+obj.id+'</div>');
        }
    else{
        alert("no existing parent");
    }


}

});
      }

});