2012-02-28 18 views
12

Mam plik JSON, który zawiera dane jak poniżej:Filtrowanie danych 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" }, 
]} 

muszę filtrować tytuł o zasięgu dwóch pól tekstowych: od i do.

+5

Na początek Twoja tablica jest niepoprawna - usuń ostatni przecinek. –

+1

musisz podać więcej informacji ... czy Twój zakres obejmuje? są wartości tytułów zawsze liczby przekazywane jako ciągi znaków? – scunliffe

+0

Pytanie nie jest jasne. Zrób demo w jsfiddle/jsbin. Wyjaśnij swój problem. –

Odpowiedz

9

Używam Linq JS w moim bieżącym projekcie i działa bardzo dobrze do filtrowania danych.

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

Przeczytaj json w obiekcie/arr w funkcji parseJson jquery (http://api.jquery.com/jQuery.parseJSON/) i spróbuj spliczyć tablicę za pomocą funkcji splicingu() Po prostu wykonaj kopię przedmiotu i spliczyć go.

+1

Uwielbiam funkcję przyprawy. Jest taki smaczny. – joidegn

38

Może to zrobić?

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

Tak, jego metoda ES5 ale które mogą być podkładano całkiem ładnie

+9

+1 za brak natychmiastowego połączenia z biblioteką, aby poradzić sobie z niepotrzebnymi rzeczami. – Snuffleupagus

+0

Bardzo doceniam, że jestem ponad ludźmi, którzy myślą, że potrzebne są biblioteki o rozmiarach 30-60kb dla dobrego przykładu z 4-5 poprawkami –

+1

. Nie będąc kresem JSON, dodałem var filterJson = json.posts.filter (... FiltrJson jest tablicą pasujących wierszy, więc filterJson [2] jest trzecim elementem, który pasuje do filtru. – Dave

2

spróbować

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

Nie ma innego rozwiązania to: using jLinq.js (documentation), który ma jeszcze bardziej cechy. W tym przypadku, można uzyskać rozwiązanie stosując następujący kod:

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

Pierwszy raz masz wszystkie dane json, trzeba je przechodzić. Do tego

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

Cóż mam tej tablicy JSON pełen projektów, każdy z projektu należą do produktu:

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

Chciałem aby uzyskać tylko te z określonym identyfikatorem nadrzędnym, i zrobiłem to jak poniżej:

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