Filtering JSON Array

Question

I need to add filter option to my grid.I use Fixed Data Table.Here is simple filtering example with that grid.

https://github.com/facebook/fixed-data-table/blob/master/examples/old/FilterExample.js

This example filter the Json array only by first name.But I need to filter by all of the objects in JSON Array. For example may JSON array is here:

 {"id":7,"first_name":"Sarah","last_name":"Hottie",
"country":"Sweden","salary":12000},

{"id":9,"first_name":"Mary","last_name":"Parah",
"country":"Argentina","salary":10000}

When I write "arah" to the general input filter value.I need to show both of the two elements of array.Because "id:7" first name (Sarah) and "id:9" last name (Parah) include my filter value ("arah").

If the country value of the another element of JSON array include "arah" I need to show that too.

So I need to filter the JSON array by all of the values it include. What do you suggest?

Answer 1

You can utilize the filter prototype of the array. It will be something like this:

var arr = [ {"id":7,"first_name":"Sarah","last_name":"Hottie",
"country":"Sweden","salary":12000}, {"id":9,"first_name":"Mary","last_name":"Parah","country":"Argentina","salary":10000}]


var runFilter = function(arr,searchKey) {

    var filterFn = function(obj) { 

      // Iterate the obj for each key. 
      for (var k in obj) {
        if (typeof obj[k] == "string" && obj[k].indexOf(searchKey) >= 0) {
          return true;
        }
      }
     }


      return arr.filter(filterFn);
    }

var filteredArr = runFilter(arr,'arah')

Answer 2

You can find the filter function in line 45 of the example code. It is

return row['firstName'].toLowerCase().indexOf(filterBy.toLowerCase()) >= 0

If you want to look into every part of an Object, you can use a for...in loop:

for(var key in row){
    if((row[key] + "").indexOf(filterBy) > -1){
        return true;
    }
}
return false;

Replace line 45 with the code above and you should be fine.

Answer 3

I suggest to use Array#filter in combination with Array#some and a check of the type.

 var data = [{ "id": 7, "first_name": "Sarah", "last_name": "Hottie", "country": "Sweden", "salary": 12000 }, { "id": 9, "first_name": "Mary", "last_name": "Parah", "country": "Argentina", "salary": 10000 }], search = 'arah', result = data.filter(function (a) { return Object.keys(a).some(function (k) { if (typeof a[k] === 'string' && ~a[k].indexOf(search)) { return true; } if (typeof a[k] === 'number' && ~a[k] === search) { return true; } }); }); document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>'); 

Answer 4

Try This :

<script type="text/javascript">
        var arr = [ {"id":7,"first_name":"Sarah","last_name":"Hottie","country":"Sweden","salary":12000}, 
                  {"id":8,"first_name":"Mary","last_name":"Parah","country":"Argentina","salary":10000},
                  {"id":9,"first_name":"Gold","last_name":"sonam","country":"India","salary":15000}];
         var filterKey = 'arah';  
         function findJsonString(arr,filterKey){
               var result = [];           
               for (var i = arr.length - 1; i >= 0; i--) {
                  var part1 = arr[i].first_name.indexOf(filterKey);
                  var part2 = arr[i].last_name.indexOf(filterKey);
                  // console.log(arr[i]);
                  // console.log(' part 1 : ' + part1 + ' part 2 : ' + part2);
                  if(part1 != -1 || part2 != -1)
                  {                          
                      result[+i] = arr[i]; 
                      // OR result.push(arr[i]);                        
                  }
               }
               return result;
         }         
         console.log(findJsonString(arr,filterKey));
      </script>

OUTPUT :

[Object { id=7, first_name="Sarah", last_name="Hottie", more...}, Object { id=8, first_name="Mary", last_name="Parah", more...}]