2012-02-28 131 views
12

我有一个包含类似下面的数据的JSON文件:过滤JSON数据

{"posts": [ 
    { "title":"1", "url":"n1.png" }, 
    { "title":"2", "url":"n2.png" }, 
    { "title":"3", "url":"n3.png" }, 
    { "title":"4", "url":"n4.png" }, 
    { "title":"5", "url":"n5.png" }, 
    { "title":"6", "url":"n6.png" }, 
    { "title":"7", "url":"n7.png" }, 
    { "title":"8", "url":"n8.png" }, 
    { "title":"9", "url":"n9.png" }, 
    { "title":"10", "url":"n10.png" }, 
]} 

我需要范围内两个文本框来筛选标题:从和。

+5

首先,您的数组无效 - 删除最后一个逗号。 – 2012-02-28 14:28:23

+1

您需要提供更多信息......是否包含您的范围?标题的值是否总是以字符串的形式传递? – scunliffe 2012-02-28 14:30:18

+0

问题不清楚。在jsfiddle/jsbin中进行演示。澄清你的问题。 – 2012-02-28 14:31:00

回答

9

我在当前项目中使用Linq JS,它对于过滤数据非常有效。

http://jslinq.codeplex.com/

var posts = [ 
    { "title":"1", "url":"n1.png" }, 
    { "title":"2", "url":"n2.png" }, 
    { "title":"3", "url":"n3.png" }, 
    { "title":"4", "url":"n4.png" }, 
    { "title":"5", "url":"n5.png" }, 
    { "title":"6", "url":"n6.png" }, 
    { "title":"7", "url":"n7.png" }, 
    { "title":"8", "url":"n8.png" }, 
    { "title":"9", "url":"n9.png" }, 
    { "title":"10", "url":"n10.png" } 
]; 

var filteredPost = JSLINQ(posts) 
        .Where(function(item){ return item.title >= "textBox1Value" && item.title <= "textBox2Value"; }); 
1

将json读入对象/ arr jquery(http://api.jquery.com/jQuery.parseJSON/)的parseJson函数以及尝试使用拼接函数()拼接数组只需复制的对象并拼接一个。

+1

我喜欢香料功能。它很好吃。 – joidegn 2012-02-28 14:37:56

38

为什么不这样做呢?

var json = JSON.parse('{"posts": [ 
{ "title":"1", "url":"n1.png" }, 
{ "title":"2", "url":"n2.png" }, 
{ "title":"3", "url":"n3.png" }, 
{ "title":"4", "url":"n4.png" }, 
{ "title":"5", "url":"n5.png" }, 
{ "title":"6", "url":"n6.png" }, 
{ "title":"7", "url":"n7.png" }, 
{ "title":"8", "url":"n8.png" }, 
{ "title":"9", "url":"n9.png" }, 
{ "title":"10", "url":"n10.png" } 
]}'); 

var filteredJson = json.posts.filter(function (row) { 
    if(row.title matches your criteria) { 
    return true 
    } else { 
    return false; 
    } 
}); 

是的,它的ES5方法,但可以很好地

+9

+1对于没有立即链接到库来处理不需要的东西 – Snuffleupagus 2012-02-28 14:33:28

+0

非常感谢,我认为30-60kb库需要4-5行修复 – 2012-02-28 14:37:41

+1

很好的例子。不是JSON,我添加了一个 var filterJson = json.posts.filter(... filterJson是一个匹配行的数组,因此filterJson [2]是匹配过滤器的第三个项目 – Dave 2014-06-17 19:51:58

2

匀试试这个

var q = new RegExp(req.query.q,'i'); 

posts = posts.filter(function(item){ 
    if(item.title.match(q) || item.url.match(q)){ 
     return item; 
    } 
}); 
2

还有另一种解决方案是:使用jLinq.jsdocumentation),它具有更特征。在这种情况下,您可以通过下面的代码得到解决:

var selectedPosts = jLinq.from(posts) 
         .betweenEquals("title",4,8) 
         .select(); 
0
json data array of objects filter 



<html> 
    <head> 
    <script type="text/javascript"> 
    /* 
     var ss = JOSN.stringify(obj,function(key,value){ //serialization 
      if(key=='a'){ 
       return undefined; 
      }else{ 
       return value; 
      } 
     }); 
    */ 
    var jsonStr = [ 
    { 
    "name": "Bang Bang", 
    "outline": "A chance encounter with a mysterious charmer leads to a bank employee's wild adventure.", 
    "rating": 5.6, 
    "director": "Siddharth Anand", 
    "id": 250 
    }, 
    { 
    "name": "Bang Bang", 
    "outline": "A chance encounter with a mysterious charmer leads to a bank employee's wild adventure.", 
    "rating": 5.6, 
    "director": "Siddharth Anand", 
    "id": 250 
    }, 
    { 
    "name": "Bang Bang", 
    "outline": "A chance encounter with a mysterious charmer leads to a bank employee's wild adventure.", 
    "rating": 5.6, 
    "director": "Siddharth Anand", 
    "id": 250 
    }, 
    { 
    "name": "Indian", 
    "outline": "After his daughter's tragic death, a freedom fighter steps up his war against corruption.", 
    "rating": 8.4, 
    "director": "Shankar", 
    "id": 251 
    }, 
    { 
    "name": "Dilwale Dulhania Le Jayenge", 
    "outline": "Raj and Simran meet on a trip to Europe. After some initial misadventures, they fall in love. The battle begins to win over two traditional families.", 
    "rating": 8.4, 
    "director": "Aditya Chopra", 
    "id": 253 
    } 
    ]; 



    var jsonobj = jsonStr; 
    function filterMovieDirectorData(movie,director){ 
     if(movie!='' && (director!='' && director!='Director')){ 
      var data = jsonobj.filter(function(item){ 
      return (item["name"].toLowerCase().indexOf(movie.toLowerCase())!=-1 && item["director"].toLowerCase().indexOf(director.toLowerCase())!=-1) 
      }); 
     }else if(movie!='' && director=='Director'){ 
      var data = jsonobj.filter(function(item){ 
      return item["name"].toLowerCase().indexOf(movie.toLowerCase())!=-1 
      }); 
     }else if(movie=='' && (director!='' && director!='Director')){ 
      var data = jsonobj.filter(function(item){ 
      return item["director"].toLowerCase().indexOf(director.toLowerCase())!=-1 
      }); 
     } 

    return data; 
    } 


    function getFilterDirectorJson(){ 

     var inputStr = document.getElementById("movie").value; 
     var e = document.getElementById("director"); 
     var directorStr = e.options[e.selectedIndex].text; 

     if((inputStr=='' || inputStr=='Enter movie name') && (directorStr=='' || directorStr=='Director')){ 
      alert("Please enter movie name or select director."); 
      document.getElementById("filter_data_div").innerHTML=""; 
      document.getElementById("movie").focus(); 
      return false; 
     } 

     var filterObjs = filterMovieDirectorData(inputStr,directorStr); 
     var text="";  
     for(var i=0; i<filterObjs.length; i++){ 
      text+='<div id="filter_data"><div><h3>'+filterObjs[0].name+'</h3></div>'; 
      text+='<div>Director : '+filterObjs[0].director+'</div></div><div class="clear"></div>'; 
     } 
    if(filterObjs.length===0){document.getElementById("filter_data_div").innerHTML='<div id="filter_data"><div><h3>No movies found.</h3></div></div>';}else 
    document.getElementById("filter_data_div").innerHTML=text; 

    } 

    window.onload=function(){ 
    getDirectors(); 
    } 

    function getDirectors(){ 
     for(var i=0; i<jsonobj.length; i++){ 
      //console.log(jsonobj[i].director); 
      var option = document.createElement("option"); 
      option.text = jsonobj[i].director; 
      option.value = i; 
      var daySelect = document.getElementById('director'); 
      daySelect.appendChild(option);  
     } 
    } 

    </script> 
    <style> 
    #director{ 
    line-height: 3px; 
    padding: 20px; 
    font-size: 21px; 
    color: #acacac; 
    } 
    #go{ 
    background: #FFC000; 
    padding: 11px 14px 16px 11px; 
    font-size: 36px; 
    line-height: 3; 
    color: #fff; 
    margin: 0px; 
    text-align: center; 
    } 
    #movie{ 
    width: 213px; 
    font-size: 21px; 
    margin-left: 12px; 
    padding: 20px; 
    color:#ACACAC; 
    } 
    #main_div{ 
    background: #EEEEEE; 
    width: 554px; 
    min-height:120px; 
    } 
    #filter_data{ 
    width: 335px; 
    background: #D8D8D8; 
    padding: 1px 0px 20px 13px; 
    margin: 20px 0px 0px 12px; 
    border: 1px solid #000; 
    } 
    a{text-decoration:none;} 
    .clear{clear: both;} 
    </style> 
    </head> 
    <body> 

    <div id="main_div"> 
    <div style="display:block;"> 
    <input type="text" id="movie" placeholder="Enter movie name"> 
    <select id="director" ><option value="">Director</option></select> 
    <a href="javascript:;" id="go" onclick="getFilterDirectorJson(event)">Go</a> 
    </div> 
    <div id="filter_data_div"></div> 
    </div> 
    </body> 
    </html> 
0

首先,一旦你拥有所有的JSON数据,你需要遍历他们。为此,

  **$.each(data, function (i, data) { 
      if (data.title >= "textBox1Value" && item.title <= "textBox2Value") 
      //then the data; 
     });** 
  1. 列表项
0

嗯,我有这个JSON阵列充分的项目,每个项目都属于一个产品:

[ 
{ 
    "id": 1, 
    "parentProduct": { 
     "id": 12, 
     "productName": "Test 123" 
    }, 
    "phase": "Phase 4", 
    "productNumber": "111223", 
    "projectName": "Test JPEG Apple", 
    "supplier1": "de", 
    }, 
    { 
    "id": 2, 
    "parentProduct": { 
    "id": 12, 
    "productName": "Test from me" 
    }, 
    "phase": "222", 
    "productNumber": "11122", 
    "projectName": "Test PNG", 
    "supplier1": "222" 
    } 
] 

我想只得到具有特定父母身份的人,我做了如下:

filterByProductId(projects, productId) : any[] { 
    var filteredArray = new Array; 
    for(var k in projects) { 
     if(projects[k].parentProduct.id == productId) { 
     filteredArray.push(projects[k]); 
     } 
    } 
return filteredArray; 
}