如何通过 JSON 数据创建列表，甚至是 children？

Question

我有一个 JSON object，我需要从中创建一个列表。

我可以做得很好，但每个 object 可以有 children。它看起来像这样：

{
    "Boys" : 
    [
        {
            "name" : "Fred",
            "age" : "65",
            "children" : [{
                    "name" : "dave",
                    "age" : "24",
                    "children" : []
                }, {
                    "name" : "cliff",
                    "age" : "32",
                    "children" : []
                }
            ]
        },  
        {
            "name" : "jon",
            "age" : "46",
            "children" : [{
                    "name" : "jess",
                    "age" : "26",
                    "children" : []
                }, {
                    "name" : "gloria",
                    "age" : "19",
                    "children" : []
                }
            ]
        }
    ],
    "Girls" : 
    [
        {
            "name" : "Jane",
            "age" : "65",
            "children" : [{
                    "name" : "dave",
                    "age" : "24",
                    "children" : []
                }, {
                    "name" : "grace",
                    "age" : "32",
                    "children" : []
                }
            ]
        },  
        {
            "name" : "ariana",
            "age" : "46",
            "children" : [{
                    "name" : "jessy",
                    "age" : "28",
                    "children" : []
                }, {
                    "name" : "niki",
                    "age" : "19",
                    "children" : []
                }
            ]
        }
    ]
}

我可以在 for-loop 中顺利完成，但我不确定如何在 children 中完成。

基本上我想遍历每个元素并创建一个列表项，其中文本是我当前所在的 object 的名称。

所以对于上面的JSON，它会是这样的：

-Boys
   -Fred
      -Dave
      -Cliff
   -Jon
      -Jess
      -Gloria
-Girls
   -Jane
      -Dave
      -Grace
   -Ariana
      -Jessy
      -Niki

创建此列表后，我将使用 JSTree 对其进行格式化，如有任何帮助，我们将不胜感激:)

Answer 1

你需要一个递归函数，一个在事情发生之前调用自身的函数。在您的情况下，您需要一个遍历人员列表的功能。对于每个人，它会画上名字，然后检查那个人是否有 children。如果是，则再次调用该函数，将 children.

的列表传递给它

像这样：

var renderList = function(list){
    var $list = $('<ul>');

    $.each(list, function(i, element){
        var $child = $('<li>'+element.name+'</li>');
        if (element.children.length > 0) {
            $child.append(renderList(element.children));
        }
        $list.append($child);
    });

    return $list;
};    

$('#boys').append(renderList(data.Boys)); // Start list of boys
$('#girls').append(renderList(data.Girls)); // Start list of girls

工作示例在这里http://jsfiddle.net/zbm778ag/

如何通过 JSON 数据创建列表，甚至是 children？

How to go through JSON data to create a list, even the children?

javascript

jquery

json

html-lists