Question

我的这个JSON数组每个都有很多person个数据，类型为"hr"或"accounting"。

JSON数组如下所示：

{
    "0": {
        "id": "2",
        "name": "blabla",
        "type": "hr"
    },
    "1": {
        "id": "3",
        "name": "bub",
        "type": "hr"
    },
    "2": {
        "id": "4",
        "name": "ula",
        "type": "accounting"
    },
    "3": {
        ...
    }
}

我希望以ul的形式显示它们：

<ul>
   <li><p>hr</p>name: blabla<p></li>
   <li><p>hr</p>name: bub<p></li>
   <li><p>hr</p>......</li>
</ul>
<ul>
   <li><p>accounting</p>name: ula<p></li>
   <li><p>accounting</p>......</li>
</ul>

但我不知道如何分离JSON数组或如何正确地循环它以显示它。

Answer 1

这基本上可以为一个部门做你想要的。通过在每个循环中放置一个if并根据value.type

进行检查，可以将它用于每个部门

var new_html = "<ul>";
$.each('name_of_json_array', function(key, value){
    new_html+="<li><p>"+value.type+"</p><p>name: "+value.name+"</p></li>";
});
new_html+="</ul>";
$('#some_container_element').append(new_html);

Answer 2

试试这个：

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container"></div>
        <script>
        var json={
            "0": {
                "id": "2",
                "name": "blabla",
                "type": "hr"
            },
            "1": {
                "id": "3",
                "name": "bub",
                "type": "hr"
            },
            "2": {
                "id": "4",
                "name": "ula",
                "type": "accounting"
            }
        };

        var previous_type=json[0].type;
        var _html="<ul>";

        $.each(json, function(index,key) {
            if (previous_type!=key.type) {
                _html+="</ul><ul>";
            }
            previous_type=key.type;
            _html+="<li><p>"+key.type+"</p><p>name: "+key.name+"</p></li>";
        });
        _html+="</ul>";
        $('.container').html(_html);
        </script>
    </body>
</html>

为每种不同的类型创建一个新的ul。

container的输出：

<div class="container">
    <ul>
        <li>
            <p>hr</p>
            <p>name: blabla</p>
        </li>
        <li>
            <p>hr</p>
            <p>name: bub</p>
        </li>
    </ul>
    <ul>
        <li>
            <p>accounting</p>
            <p>name: ula</p>
        </li>
    </ul>
</div>

分开JSON数组

2 个答案: