separate a JSON array

Question

I have this JSON array with a lot of person data every one with a type like "hr" or "accounting".

the JSON array looks like this:

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

I want to display them in an ul like this:

<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>

but i have no clue how to separate the JSON array or how to properly loop through it to display it like that.

What have you considered/tried so far? What reference are you using for understanding Javascript? — Peter Alfvin, Jun 26 '13 at 21:10

Rooster · Answer 1 · 2013-06-26T21:20:19.463

2

this will basically do what you want for one department. You can use it for each department by putting an if in the each loop and checking it against 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);

edited Jun 26 '13 at 21:20

answered Jun 26 '13 at 21:11

Rooster

9,954
8
44
71

score 2 · Accepted Answer · answered Jun 26 '13 at 21:24

Try this:

<!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>

It creates a new ul for every different type.

Output of 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>

thanks dave works like a charm... almost like what i had but i missed the most important part the if loop... both thumps up from me — Frank, Jun 27 '13 at 01:12

separate a JSON array

2 Answers2