javascript - javascript 递归 ul li json

Question

我正在尝试使用以下 JSON 数据在递归内部函数中创建以下类似结构，但运气不佳，确实需要一些帮助，所以如果有人可以提供帮助，请做。先感谢您

代码（编辑）：

   $('#citytree').html(''); 
    $.ajax({
        type: "POST",
        url: base_url+"Cprivileges/checkbox",
        data: dataString,
        dataType: "json",
        cache: false,
        beforeSend: function(){$('#ajax_loading').show();},
        complete:function(){$('#ajax_loading').hide();},
        success: function(data){ 
                    chebox = "<ul>";
                    $.each(data.cuy, function(i,cuy){
                        chebox = chebox + "<li><input type='checkbox' value=" + cuy.idmenu + " name='mk[]'>" + cuy.Title + "</li>";
                    });
                    chebox = chebox + "</ul>";
                    $("#citytree").append(chebox);  
        } 
    });

JSON：

{
    "cuy": [{
        "idmenu": "1",
            "IDparent": "0",
            "Title": "Data Aktifitas Supporting"
    }, {
        "idmenu": "2",
            "IDparent": "1",
            "Title": "Sumber Daya Manusia"
    }, {
        "idmenu": "3",
            "IDparent": "0",
            "Title": "Ratio Keuangan"
    }, {
        "idmenu": "4",
            "IDparent": "3",
            "Title": "Beban Resiko Operasional"
    }, {
        "idmenu": "5",
            "IDparent": "3",
            "Title": "Business Plan"
    }]
}

如何生成这个：

• 数据活动支持
  • 桑巴达亚马努西亚
• 比率 Keuangan
  • Beban Resiko 运营
  • 商业计划书

Answer 1

这段代码可能有助于实现您的功能；

for (var i = 0; i < json.length; i++) {

        console.log(json.length +"...."+json[i].cuy.length);

        for (var j=0; j< json[i].cuy.length; j++){

         console.log(json[i].cuy[j].Title);
            $("#test").append("<ul>"+json[i].cuy[j].Title+"</ul");               

        }
    }

另一个最佳解决方案是使用$.getJSON它将帮助您解决问题；

Answer 2

你需要这样的东西：

var ul = $("#container");

for (var i = 0; i < json.cuy.length; i++) {
    var txt = "<li data-id='" + json.cuy[i].idmenu + "'>" + json.cuy[i].Title + "</li>";
    var parent;

    if (json.cuy[i].IDparent === "0") {
        parent = ul;
    } else {
        var $elem = ul.find("li[data-id='" + json.cuy[i].IDparent + "']");
        if ($elem.find("ul").length == 0) {
            $elem.append("<ul>");
        }
        parent = $elem.find("ul:first");
    }

    parent.append(txt);        
}

JSFiddle

Answer 3

只要您的数据列表保持当前排序，此解决方案就可以工作，也就是说，兄弟节点必须出现在列表中的父节点之后：

function buildList(list) {
    var html = [], 
        item, next;
    html.push('<ul>');
    while (list.length) {
        item = list.shift();
        next = list[0] || {};
        html.push('<li>', item.Title);
        if (next.IDparent === item.idmenu) {
            html.push(buildList(list));
        }
        html.push('</li>');
        next = list[0] || {};
        if (next.IDparent !== item.IDparent) {
            break;
        }
    }
    html.push('</ul>');
    return html.join('');
}

用法：buildList(data.cuy);。

演示：http: //jsfiddle.net/wared/Ea6Q2/。