Чтение данных JQuery из файла

Question

Привет, я пытаюсь прочитать данные json и отображать данные во вложенной таблице. Я также даю ожидаемый результат, а также разместил мой скрипт, который я пробовал.

мой Data.json

{"Data":[ 
     { 
     "label":"node1", 
     "color":"red", 
     "children":[ 
      { 
       "label":"vip1", 
       "color":"red", 
       "children":[ 
        { 
        "label":"obj1", 
        "color":"gray", 
        "id":"539803eae4b0ffad82491508" 
        }, 
        { 
        "label":"obj2", 
        "color":"green", 
        "id":"5395635ee4b071f136e4b691" 
        }, 
        { 
        "label":"obj3", 
        "color":"green", 
        "id":"539803e4e4b0ffad82491507" 
        } 
       ], 
       "id":"53956358e4b071f136e4b690" 
      }, 
      { 
       "label":"vip2", 
       "color":"blue", 
       "id":"539803f2e4b0ffad82491509" 
      } 
     ], 
     "id":"5395634ee4b071f136e4b68e" 
     }, 
     { 
     "label":"node2", 
     "children":[ 
      { 
       "label":"vip1", 
       "color":"green", 
       "id":"539803eae4b0ffad82491501" 
      }, 
      { 
       "label":"vip2", 
       "color":"green", 
       "id":"5395635ee4b071f136e4b694" 
      } 
     ], 
     "id":"5395637fe4b071f136e4b692" 
     }, 
     { 
     "label":"node3", 
     "color":"red", 
     "children":[ 

     ], 
     "id":"5395637fe4b071f136e4b692" 
     } 
    ] 
} 

Мой сценарий

<script> 
    $.getJSON("data/widgetData.json", function(data) { 
    $('#widget').append('<table cellspacing="0" align="center" width="600" cellpadding="0" style=" border:3px solid black;">'); 
    var table = $('#widget').children(); 
    table.append('<tr height="30" style="background-color:black"><td>Title</td></tr>'); 
$.each(data.widgetData, function(index0, v) { 
    //alert(v.color); 


    table.append('<tr height="180" style="background-color:'+v.color+'"><td>'+v.label+'</td></tr>'); 

    $.each(v.children, function (index1, w) { 
     //alert(w.label); 
     table.append('<tr height="180" style="background-color:'+w.color+'"><td>'+w.label+'</td></tr>'); 

     $.each(w.children, function (index2, x) { 
     // alert(x.label); 
     });   
    }); 
}); 
table.append('</table>'); 
}); 

</script> 

Пожалуйста, помогите мне достичь этого и позвольте мне, что случилось с моим сценарием

Answer 1

what's wrong with my script?

1. В каждом из ваших обратных вызовов .each вы делаете то же самое.
2. Вы должны использовать рекурсию вместо неизвестного числа циклов.
3. Вы никогда не проверяете, есть ли у объекта свойство children перед вызовом .each. Это приводит к тому, что undefined передается в .each. Это приведет к следующей ошибке: Cannot read property 'length' of undefined в версиях тестируемого jQuery.

Please help me to achieve this

Я не буду пытаться сделать результат выглядеть изображение страницы 2 в вашем вопросе. Но вот код немного очищается, в том числе два разных способа рекурсии по данным JSON.

Это фиксированная версия кода, содержащегося в вопросе.

function ajaxResponseHandler(data) { 
    var table = $('<table cellspacing="0" align="center" width="600" cellpadding="0" style=" border:3px solid black;">'); 
    $('#widget').append(table); 

    table.append('<tr height="30" style="background-color:black"><td>Title</td></tr>'); 
    appendTr(table, data.widgetData); 
} 

// recurse over the data structure, 
// instead of writing an unknown number of loops within loops 
function appendTr(table, data) { 
    $.each(data, function (i, obj) { 
     table.append('<tr height="180" style="background-color:' + obj.color + ';"><td>' + obj.label + '</td></tr>'); 
     if (obj.children && obj.children.length) { 
      appendTr(table, obj.children); 
     } 
    }); 
} 

Here is a demo

В этом примере таблицы вложенными:

function ajaxResponseHandler(data) { 
    var table = $('<table cellspacing="0" align="center" width="600" cellpadding="0" style=" border:3px solid black;">'), 
     tr = $('<tr height="30" style="background-color:black"></tr>'), 
     td = $('<td>Title</td>'); 
    $('#widget').append(table); 
    tr.append(td); 
    table.append(tr); 
    td.append(appendTr(data.widgetData)) 
} 

function appendTr(data) { 
    var table = $('<table style="border:1px solid white;width:100%">'); 
    $.each(data, function (i, obj) { 
     var tr = $('<tr height="180" width="180" style="background-color:' + obj.color + ';"></tr>'), 
      td = $('<td>' + obj.label + '</td>'); 
     tr.append(td); 
     table.append(tr); 
     if (obj.children && obj.children.length) { 
      td.append(appendTr(obj.children)); 
     } 
    }); 

    return table; 
} 

FIDDLE

Answer 2

Вот частичный ответ:

function drawData(data,parent) { 
    $.each(data,function(index,item){ 
     var cell=$("<div><div>"); 
     cell.text(item.label); 
     if(item.children) { 
      drawData(item.children,cell); 
     } 
     parent.append(cell); 
    }); 
} 

Вы должны уметь приспосабливать этот код к вашим нуждам