根据JQuery AJax中的类别过滤JSON的结果

时间:2014-06-19 14:50:01

标签: javascript jquery ajax json

我正在填充类别和结果,但我想如果用户选择类别,则应根据选择过滤掉结果。用户也可以根据多个选择过滤结果。

请在此处查看我的代码

posts": [

{
    "id": 85,
    "type": "post",
    "slug": "article22",
    "url": "http://example.com/tankers/abc/article22/",
    "status": "publish",
    "title": "Article22",
    "title_plain": "Article22",
    "content": "<p>ar 16 Lorem ipsum dolor sit amet,</p>\n",
    "date": "2014-06-06 15:00:12",
    "modified": "2014-06-06 15:00:12",
    "categories": [
        {
            "id": 24,
            "slug": "abc",
            "title": "abc",
            "description": "",
            "parent": 23,
            "post_count": 7
        }
    ],
},


{
    "id": 86,
    "type": "post",
    "slug": "article23",
    "url": "http://example.com/tankers/abc/article23/",
    "status": "publish",
    "title": "Article23",
    "title_plain": "Article23",
    "content": "<p>ar 16 Lorem ipsum dolor sit amet,</p>\n",
    "date": "2014-06-06 15:00:12",
    "modified": "2014-06-06 15:00:12",
    "categories": [
        {
            "id": 24,
            "slug": "xyz",
            "title": "xyz",
            "description": "",
            "parent": 0,
            "post_count": 7
        }
    ],
},

请参阅下面的我的javascript代码

$.ajax({
    url: "/api/get_recent_posts/",
    //force to handle it as text
    dataType: "json",
    success: function(obj){
        var arr = [], //to collect id values 
        collection = []; //collect unique object
        $.each(obj.posts , function(key , value){ // First Level
            $('#posts-articles-parent').append('<li><h2>'+value.title+'</h2></li>' );
            $.each(value.categories , function(k , v ){  // The contents inside stars
                if ($.inArray(v.id, arr) == -1) {
                    arr.push(v.id);
                    if(v.parent == 0){
                        $('#posts-category-parent').append('<li><input type="checkbox" class="chkCategory" checked="true" value="'+v.id+'"/><a>'+v.title+'</a></li>' );
                    } else {
                        $('#posts-category').append('<li><input type="checkbox" class="chkCategory" checked="true" value="'+v.id+'"/><a>'+v.title+'</a></li>' );
                    }
                }
            });
        });
    }
});

请参阅我的HTML代码

<div id="posts-categories-wrapper">
    <ul id="posts-category-parent">
    </ul>
    <ul id="posts-category">
    </ul>
</div>
<div id="posts-articles-wrapper">
    <ul id="posts-articles-parent">
    </ul>
</div>

我想如何制作结果&#34; value.title&#34;根据所选类别过滤掉。请参阅plnkr链接plnkr.co/edit/8OlPCUMuLfZBFry63kEb?p=preview。如果我选择任何类别

,我想如何编写功能来过滤掉结果

0 个答案:

没有答案