Json Filtering in jquery

Question

Hello i want to filter json data like sql query without the help of plugins like alasql.js or linq.js or any plugins. for example

{
    "Managing PCL": [
        {
            "idItScreen": "1436",
            "topicName": "Managing PCL",
            "isFav": 0,
            "cdeItScreen": "ListActiveTarif",
            "busScreenName": "My Current Tarif"
        },
        {
            "idItScreen": "1437",
            "topicName": "Managing PCL",
            "isFav": 0,
            "cdeItScreen": "ListTermineTarif",
            "busScreenName": "History Tarif"
        }
    ]
}

for example i need to get data where idItScreen>1430 so that json data must be displayed the main challenge is to do without plugins so please reccomend me a good solution to do this without plugins

Answer 1

First turn your JSON into a Javascript object:

var obj = JSON.parse(myJSON);

Then do your filtering:

var matches = [];
var arr = obj['Managing PCL'];
for (var i = 0; i < arr.length; i++) {
    if (arr[i].idItScreen > 1430) {
        matches.push(arr[i]);
    }
}

Or using jQuery.grep :

var matches = jQuery.grep(obj['Managing PCL'], function(n, i) {
    return n.idItScreen > 1430;
});

Now matches contains the matching items.

If you want to get the JSON again, just use JSON.stringify :

var filteredJSON = JSON.stringify({'Managing PCL': matches});

Answer 2

You can also simply use .filter :

var matches = [];
var all = obj['Managing PCL'];
var filtered = all.filter(function(){
  return $(this).idItScreen > 1430;
})

Answer 3

You don't need jQuery for this. Use filter on the data instead.

function filterData(data, key, value) {
  return data.filter(function (el) {
      return el[key] > value;
  });
}

// Note, `filter` operates on arrays, so you need to specify the
// array that contains the data
var result = filterData(data['Managing PCL'], 'idItScreen', '1430');

Also note that filter returns a new array containing the objects that it's found that match your criteria. You can access those objects in the usual way: result[0] , for example.

DEMO

You could even expand this to create a function that returns data based on the operator too, not just greater-than, by using a look-up object:

var lookup = {
    '>': function (data, value) { return data > value; },
    '<': function (data, value) { return data < value; },
    '===': function (data, value) { return data === value; }
}

function filterData(data, key, operator, value) {
    return data.filter(function (el) {
        return lookup[operator](el[key], value);
    });
}

filterData(data['Managing PCL'], 'idItScreen', '>', '1430');
filterData(data['Managing PCL'], 'idItScreen', '===', '1430');

DEMO

Answer 4

You don't need to use jQuery for this. You can use the filter() method of Array.prototype . See the working snippet below:

 var obj = { "Managing PCL": [{ "idItScreen": "1436", "topicName": "Managing PCL", "isFav": 0, "cdeItScreen": "ListActiveTarif", "busScreenName": "My Current Tarif" }, { "idItScreen": "1437", "topicName": "Managing PCL", "isFav": 0, "cdeItScreen": "ListTermineTarif", "busScreenName": "History Tarif" }] }; var filteredArray = obj['Managing PCL'].filter(function(item) { return item.idItScreen > 1430; }); obj['Managing PCL'] = filteredArray; document.getElementById('result').innerHTML = JSON.stringify(obj); 

 <div id="result"></div>