使用嵌套的JSON响应（具有未定义的Json索引级别）制作HTML列表？

Question

I am new in jquery/Javascript and stucked while converting json response to HTML list, In Json response there is object inside object upto undefined level, If you have any idea to do that please help me,

JSON Response

[
{
Id: 0,
expanded: false,
Name: "Libraries",
ParentID: -1,
children: [
{
Id: 1,
expanded: false,
Name: "Image",
ParentID: 0,
children: [
{
Id: 4,
expanded: false,
Name: "JPEG",
ParentID: 1,
children: [ ]
}
]
},
{
Id: 2,
expanded: false,
Name: "Video",
ParentID: 0,
children: [
{
Id: 8,
expanded: false,
Name: "MP4",
ParentID: 2,
children: [
{
Id: 13,
expanded: false,
Name: "Sample.mp4",
ParentID: 8,
children: [
{
Id: 15,
expanded: false,
Name: "New Hit Video",
ParentID: 13,
children: [ ]
}
]
}
]
}
]
}
]
}
]

Desired Html Output

<ul>Libraries
<li>Image
<ul>
<li>JPEG</li>
</ul>
</li>

<li>Video
<ul>
<li>MP4
<ul>
<li>Sample.mp4
<ul>
<li>New Hit Video
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

My try Code:

$(document).ready(function(){
var json='
[{"Id":0,"expanded":false,"Name":"Libraries","ParentID":-1,"children":[{"Id":1,"expanded":false,"Name":"Image","ParentID":0,"children":[{"Id":4,"expanded":false,"Name":"JPEG","ParentID":1,"children":[]}]},{"Id":2,"expanded":false,"Name":"Video","ParentID":0,"children":[{"Id":8,"expanded":false,"Name":"MP4","ParentID":2,"children":[{"Id":13,"expanded":false,"Name":"Sample.mp4","ParentID":8,"children":[{"Id":15,"expanded":false,"Name":"New Hit Video","ParentID":13,"children":[]}]}]}]}]}]';
var obj=$.parseJSON(json);
// var a=0;
$.each(obj, traversal);
function traversal(key, value) {
  if(value.Name!=null && value.ParentID!=-1 )
  {
   $('body').append('<ul name='+value.Name+' id='+value.Id+' parentID='+value.ParentID+'><a href="#" id='+value.Id+'>'+value.Name+'</a></ul>')
  }
    if (value !== null && typeof value === "object") {
        $.each(value, traversal);
    }
}
})

Answer 1

After Some search, I found my answer...... That Works

 <script type="text/javascript">
    function parseNodes(nodes) { // takes a nodes array and turns it into a <ol>
        var ol = document.createElement("OL");
        for(var i=0; i<nodes.length; i++) {
            ol.appendChild(parseNode(nodes[i]));
        }
        return ol;
    }

    function parseNode(node) { // takes a node object and turns it into a <li>
        var li = document.createElement("LI");
        li.innerHTML = '<a href="#">'+node.Name+'';
        li.className = node.Id;
        if(node.children) li.appendChild(parseNodes(node.children));
        return li;
    }

    window.jsonData =[
    {
        "Id": 0,
        "expanded": false,
        "Name": "Libraries",
        "ParentID": -1,
        "children": [
            {
                "Id": 1,
                "expanded": false,
                "Name": "Image",
                "ParentID": 0,
                "children": [
                    {
                        "Id": 4,
                        "expanded": false,
                        "Name": "JPEG",
                        "ParentID": 1,
                        "children": []
                    }
                ]
            },
            {
                "Id": 2,
                "expanded": false,
                "Name": "Video",
                "ParentID": 0,
                "children": [
                    {
                        "Id": 8,
                        "expanded": false,
                        "Name": "MP4",
                        "ParentID": 2,
                        "children": [
                            {
                                "Id": 13,
                                "expanded": false,
                                "Name": "Sample.mp4",
                                "ParentID": 8,
                                "children": [
                                    {
                                        "Id": 15,
                                        "expanded": false,
                                        "Name": "New Hit Video",
                                        "ParentID": 13,
                                        "children": []
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
];

    </script>

Answer 2

You can add list of array in single list and then same here send the value to server side     
 <script>
              $('body').on("click", ".sf-btn-finish", function ()
              {  var stringArray = [];
                  var table = $(".shopping-cart-table table tbody");
                  table.find('tr').each(function (i) {
                      var $tds = $(this).find('td');
                      var productID = $tds.eq(0).find("input").val();
                      var image = $tds.eq(1).find("img").attr('src');
                      var Name = $tds.eq(2).text().trim();
                      var Size = $tds.eq(3).text().trim();
                      var Quantity = $tds.eq(4).find("input").val().trim();
                      var Price = $tds.eq(5).text().trim();
                      var Total = $tds.eq(6).text().trim();
                      var data = new Array();
                      data[0] = productID;
                      data[1] = image;
                      data[2] = Name;
                      data[3] = Size;
                      data[4] = Quantity;
                      data[5] = Price;
                      data[6] = Total;

                      stringArray.push(data);
                  });

                   var radio;
                  $("input[name='slots']:checked").each(function () {
                      var day = $(this).parent().closest('td').prev('td').find('span').text();
                      var idVal = $(this).attr("id");
                      var time = $("label[for='" + idVal + "']").text();
                      radio=day+(" - ") + time;
                  });
                  var count = $("#count").val();
                  var amount = $("#amount").val();
                  var ptotal = $("#ptotal").val();
                  var instruction = $("#instruction").val();
                  var postData = { values: stringArray, radio: radio, count: count, amount: amount, ptotal: ptotal, instruction: instruction };

                     $.ajax({
                      type: "POST",
                      url: "/FarmProduct/ProductOrder",
                      data: postData,
                      success: function (data) {

                           if (data == "Index") {

                               alert("Your Order will be process on your Date and Time Slot");

                               window.location.href = "@Url.Action("Index","FarmProduct")";


                          }

                            else if (data == "myprofile") {
                                window.location.href = "@Url.Action("myprofile", "FarmProduct")";

                            }
                            else if (data == "nodata") {
                                alert("Please Add In Cart");



                        },

                      dataType: "json",
                      traditional: true
                  });
              });


        </script>