javascript recursive ul li json

Question

I am trying to use use the following JSON data to create the following similar structure in a recursive inner function with not much luck, really need some help and so if anyone can assist please do. Thank you in advance

CODE (edit):

   $('#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"
    }]
}

how to generate this :

• Data Aktifitas Supporting
  • Sumber daya manusia
• Ratio Keuangan
  • Beban Resiko Operasional
  • Bussiness Plan

Answer 1

This piece of code might help in achieving your functionality;

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

        }
    }

Another best solution is to use $.getJSON it will help you solving your problem;

Answer 2

You need something like this:

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

This solution will work as long as your data list keeps being sorted as it is currently, that is to say that sibling nodes must appear right after their parent node in the list :

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('');
}

Usage : buildList(data.cuy); .

Demo : http://jsfiddle.net/wared/Ea6Q2/ .