How to get JSON sub array data from array with equal option and value with Mustache.js?

Question

I am trying to work with Mustache.js that is really helping.

I am stuck on getting array with specific option and value.

My JSON is looking like that:

    {
    "departments": [
        {
            "department": [
                {
                    "id": 114,
                    "deptName": "Department 1",
                    "category": [
                        {
                            "id": 127,
                            "catName": "Category Name",
                            "subCategory": []
                        },
                        {
                            "id": 115,
                            "catName": "Category Name",
                            "subCategory": []
                        }
                    ]
                }
            ]
        },
        {
            "department": [
                {
                    "id": 123,
                    "deptName": "Department 2",
                    "category": [
                        {
                            "id": 126,
                            "catName": "Category Name",
                            "subCategory": []
                        },
                        {
                            "id": 124,
                            "catName": "Category Name",
                            "subCategory": []
                        }
                    ]
                }
            ]
        }
    ]
}

To get main department names it is easy as:

JS:

$.ajax({

            url: 'link_to_json',
            dataType: 'json',
            success: function(data) {
                var template = $('#pageHomeTpl').html();
                var html = Mustache.to_html(template, data);
                $('#category-list').html(html);
            }
        });

HTML:

<ul id="category-list">
                <script id="pageHomeTpl" type="text/template">
                    {{#departments}}
                    {{#department}}
                    <li><a href="{{id}}">{{deptName}}</a></li>
                    {{/department}}
                    {{/departments}}
                  </script>
                </ul>

But now I need to somehow get categories ("category:") from department with specific ID, for example "id": 114.

Any help, please.

Answer 1

You can try in these lines, with jQuery map() and grep()

    console.log(JSON.stringify(data)); 
var filtereddata = {"departments" : []}; 
var filtereddept= {};
filtereddept.department= $.map(data.departments, function(alldept,indx){
    return $.grep(alldept.department, function(deptobj,indx){
        return deptobj.id==114;
    });
});
filtereddata.departments[0]=filtereddept;
console.log(JSON.stringify(filtereddata));

The template to iterate the category of departments:

   <script id="pageHomeTpl" type="text/template">
                    {{#departments}}
                    {{#department}}
                    <li><a href="{{id}}">{{deptName}}</a></li>
                     {{#category}}
                     <ul>
                    <li><a href="{{id}}">{{catName}}</a></li>
                    </ul>
                    {{/category}}
                    {{/department}}
                    {{/departments}}
      </script>

Answer 2

I don't test it but it seems to be work...

...
success: function(data) {
    var template = $('#pageHomeTpl').html();
    var item = data.departments
    for(key in item){
        if(key == 'id' && item[key] == 114 ){
            var html = Mustache.to_html(template, item);
        }
    }
    $('#category-list').html(html);
}
...

with FOR .. IN statement you can cycle in your object or array take look at this link js_loop_for_in