Рекурсия дерева

285

12 декабря 2016, 10:09

Доброго времени!

Имеется такой JSON:

{
       "menu": [
             {"id":1,"cat_name":"Dashboard","parent":0},
             {"id":2,"cat_name":"Dashboard1","parent":0 },
             {"id":3,"cat_name":"Dashboard2","parent":0},
             {"id":4,"cat_name":"Dashboard3","parent":0},
             {"id":5,"cat_name":"Dashboard4","parent":1},
             {"id":6,"cat_name":"Dashboard5","parent":1},
             {"id":7,"cat_name":"Dashboard6","parent":1},
             {"id":8,"cat_name":"Dashboard7","parent":2},
             {"id":9,"cat_name":"Dashboard8","parent":5}
              ]
    }

Никак не получается нарисовать дерево из UL LI.

Пробовал так:

function rec(data) {
       var str='';
        var c=0;
        if (typeof(data) == 'object') {
            str+='<ul>';
            for(key in data){
                ++c;
                if(data[key].id==c){
                    str+='<li>'+data[key].cat_name+'</li>';
                }else{
                    rec(data[key].cat_name,c);
                }
            }
            str+='</ul>';
        }
        return str;
    }

Но не выходит, будьте добры, помогите, желательно без JQ, хочу понять сам принцип.

П.С. Благодарю.

Answer 1

Заполнение дерева идет на основании соответствия id и parent. Т.е. в рекурсивную функцию на каждом уровне надо передавать родителя уровня, который функция отстраивает и соответственно возвращать тоже надо что-то.

function rec(data, c) {
    var str = '';
    str += '<ul>';
    for (key in data) {
        if (data[key].parent == c) {
            str += '<li>' + data[key].cat_name;
            str += rec(data, data[key].id);
            str += '</li>';
        }
    }
    str += '</ul>';
    return str;
}