2012-02-28 5 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

Для начала ваш массив недействителен - удалите последнюю запятую. –

+1

вам необходимо предоставить дополнительную информацию ... ваш диапазон включительно? - значения для заголовков всегда числа, переданные как строки? – scunliffe

+0

Вопрос не ясен. Сделайте демо в jsfiddle/jsbin. Уточните вашу проблему. –

ответ

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 функцию parseJson jquery (http://api.jquery.com/jQuery.parseJSON/) и попробуйте сплайсировать массив, используя функцию сращивания() Просто сделайте копию объекта и сращивания.

+1

Мне нравится функция специй. Это так вкусно. – joidegn

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

+0

Очень ценю, что я над людьми, думающими, что для исправления 4-5 строк необходимо использовать библиотеки 30-60kb. –

+1

хороший пример. Не будучи JSON wiz, я добавил var filterJson = json.posts.filter (... ФильтрJson - это массив совпадающих строк, поэтому filterJson [2] - это третий элемент, который соответствует фильтру. – Dave

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.js (documentation), который имеет еще более функции. В этом случае, вы можете получить решение, используя следующий код:

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; 
} 
Смежные вопросы