如何使用Mustache.js从具有相同选项和值的数组中获取JSON子数组数据?

时间:2012-06-07 08:15:54

标签: javascript jquery json mustache

我正在努力使用真正有用的Mustache.js。

我坚持使用特定选项和值来获取数组。

我的JSON看起来像这样:

    {
    "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": []
                        }
                    ]
                }
            ]
        }
    ]
}

要获得主要部门名称,很容易:

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>

但现在我需要以某种方式从具有特定ID的部门获取类别(“category:”),例如“id”:114。

请帮忙。

2 个答案:

答案 0 :(得分:1)

您可以使用jQuery map()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));

迭代部门类别的模板:

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

答案 1 :(得分:0)

我没有测试它,但似乎工作......

...
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);
}
...

使用FOR .. IN语句,您可以在对象或数组中循环查看此链接 js_loop_for_in