stackoom
  简体   繁体   中英

Filtering JSON data

 原文  2012-02-28 14:26:28  1   8    javascript/ json

Question

I have a JSON file which contains data like the following: 

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

I need to filter title by range with two text boxes: from and to.

8 answers

solution1
 39  2012-02-28 14:31:12

Why not do this? 

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

Yes, its an ES5 method but that can be shimmed quite nicely

solution2
 9 ACCPTED  2012-02-28 14:30:46

I use Linq JS on my current project and it works really well for filtering data.

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

solution3
 2  2013-04-22 19:16:27

try this 

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

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

solution4
 2  2014-08-15 14:14:15

There is another solution to this: using jLinq.js ( documentation ), which has even more features. In this case, you can get the solution by using the following code: 

var selectedPosts = jLinq.from(posts)
                         .betweenEquals("title",4,8)
                         .select();

solution5
 1  2017-06-02 09:23:10

Well i have this JSON array full of projects, each of project belong to a product: 

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

I wanted to get only those with specific parent id, and i did it as below: 

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

solution6
 1  2012-02-28 14:30:22

将json读入一个对象/ arr jquery的parseJson函数（http://api.jquery.com/jQuery.parseJSON/）并尝试使用splice函数拼接数组（）只需复制一个对象和拼接那一个。

solution7
 0  2014-12-18 18:01:52

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>

solution8
 0  2016-02-22 11:14:08

First once you have all the json data, you need to traverse them. For that, 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Filtering data in a JSON array filtering json data by year Filtering Complex JSON Data Filtering json data array with javascript Filtering JSON data between 2 dates filtering JSON data by key name How to filtering JSON data with 2 values Filtering through data in JSON file filtering $http json data with angular Filtering JSON data and appending to divs
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM