2012-02-28 17 views
12

que tienen un archivo JSON que contiene datos como el siguiente:Filtrado de datos 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" }, 
]} 

necesito para filtrar título de gama con dos cuadros de texto: desde y hacia.

+5

Para empezar, su matriz no es válida: elimine la última coma. –

+1

necesita proporcionar más información ... ¿su rango es inclusivo? son los valores para los títulos siempre los números pasados ​​como cadenas? – scunliffe

+0

La pregunta no está clara. Haga una demostración en jsfiddle/jsbin. Aclara tu problema –

Respuesta

9

Uso Linq JS en mi proyecto actual y funciona muy bien para el filtrado de datos.

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

Lea el json en un objeto/arr la función parseJson de jquery (http://api.jquery.com/jQuery.parseJSON/) y trate de empalmar la matriz con la función de empalme() Simplemente haga una copia del objeto y empalme ese.

+1

Me encanta la función de especias. Es muy sabroso. – joidegn

38

Por qué no hacerlo?

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

Sí, es un método ES5 pero que se puede calzar muy bien

+9

+1 para no vincular de inmediato a una biblioteca para manejar cosas que no necesitan una – Snuffleupagus

+0

Muy apreciada, estoy por encima de la gente pensando que se necesitan bibliotecas de 30-60 kb para una reparación de 4-5 líneas –

+1

buen ejemplo. Al no ser un JSON wiz, agregué un var filterJson = json.posts.filter (... El filterJson es una matriz de filas coincidentes, por lo que filterJson [2] es el tercer elemento que coincide con el filtro. – Dave

2

tratan este

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

Hay otra solución para esto: el uso de jLinq.js (documentation), que tiene aún más caracteristicas. En este caso, se puede obtener la solución usando el siguiente código:

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

En primer lugar, una vez que tenga todos los datos JSON, tiene que pasar por ellas. Por eso,

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

Bueno, tengo esta matriz JSON llena de proyectos, cada uno de los proyectos pertenecen a un producto:

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

yo quería para obtener solo aquellos con identificación de padre específica, y lo hice de la siguiente manera:

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