-1

我有这个 JSON 数组，其中包含大量person数据，每个数据的类型都类似于"hr"or "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 数组或如何正确循环它以显示它。

4

2 回答 2

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>
于 2013-06-26T21:24:40.280 回答
2

这基本上可以为一个部门做你想做的事。您可以通过在每个循环中放置一个 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);
于 2013-06-26T21:11:38.677 回答