How to filter JSON Data in JavaScript or jQuery?

JavascriptJqueryJson

Javascript Problem Overview


How to filter JSON data using Javascript or jQuery?

This my JSON data:

[{"name":"Lenovo Thinkpad 41A4298","website":"google"},{"name":"Lenovo Thinkpad 41A2222","website":"google"},{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},{"name":"Lenovo Thinkpad 41A424448","website":"google"},{"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},{"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},{"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},{"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}]

JavaScript:

obj1 = JSON.parse(jsondata);

now I only want name and website data which is contain website is equal to "yahoo"

Javascript Solutions


Solution 1 - Javascript

This is how you should do it : ( for google find)

$([
  {"name":"Lenovo Thinkpad 41A4298","website":"google222"},
  {"name":"Lenovo Thinkpad 41A2222","website":"google"}
  ])
    .filter(function (i,n){
        return n.website==='google';
    });

Better solution : ( Salman's)

$.grep( [{"name":"Lenovo Thinkpad 41A4298","website":"google"},{"name":"Lenovo Thinkpad 41A2222","website":"google"}], function( n, i ) {
  return n.website==='google';
});

http://jsbin.com/yakubixi/4/edit [1]: http://i.stack.imgur.com/HzcL6.jpg

Solution 2 - Javascript

No need for jQuery unless you target old browsers and don't want to use shims.

var yahooOnly = JSON.parse(jsondata).filter(function (entry) {
    return entry.website === 'yahoo';
});

In ES2015:

const yahooOnly = JSON.parse(jsondata).filter(({website}) => website === 'yahoo');

Solution 3 - Javascript

The following code works for me:

var data = [{"name":"Lenovo Thinkpad 41A4298","website":"google"},
{"name":"Lenovo Thinkpad 41A2222","website":"google"},
{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},
{"name":"Lenovo Thinkpad 41A424448","website":"google"},
{"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},
{"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}]

var data_filter = data.filter( element => element.website =="yahoo")
console.log(data_filter)

Solution 4 - Javascript

Try this way, allow you even filter by other key

data:

var my_data = [{"name":"Lenovo Thinkpad 41A4298","website":"google"},
{"name":"Lenovo Thinkpad 41A2222","website":"google"},
{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},
{"name":"Lenovo Thinkpad 41A424448","website":"google"},
{"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},
{"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}];

usage:

//We do that to ensure to get a correct JSON
var my_json = JSON.stringify(my_data)
//We can use {'name': 'Lenovo Thinkpad 41A429ff8'} as criteria too
var filtered_json = find_in_object(JSON.parse(my_json), {website: 'yahoo'});

filter function

function find_in_object(my_object, my_criteria){
	
  return my_object.filter(function(obj) {
    return Object.keys(my_criteria).every(function(c) {
      return obj[c] == my_criteria[c];
    });
  });

}

Solution 5 - Javascript

You can use jQuery each function as it is explained below:

Define your data:

var jsonStr = '[{"name":"Lenovo Thinkpad 41A4298,"website":"google"},{"name":"Lenovo Thinkpad 41A2222,"website":"google"},{"name":"Lenovo Thinkpad 41Awww33,"website":"yahoo"},{"name":"Lenovo Thinkpad 41A424448,"website":"google"},{"name":"Lenovo Thinkpad 41A429rr8,"website":"ebay"},{"name":"Lenovo Thinkpad 41A429ff8,"website":"ebay"},{"name":"Lenovo Thinkpad 41A429ss8,"website":"rediff"},{"name":"Lenovo Thinkpad 41A429sg8,"website":"yahoo"}]';

Parse JSON string to JSON object:

var json = JSON.parse(jsonStr);

Iterate and filter:

$.each(JSON.parse(json), function (idx, obj) {
    if (obj.website == 'yahoo') {
        // do whatever you want
    }
});

Solution 6 - Javascript

The values can be retrieved during the parsing:

var yahoo = [], j = `[{"name":"Lenovo Thinkpad 41A4298","website":"google"},
{"name":"Lenovo Thinkpad 41A2222","website":"google"},
{"name":"Lenovo Thinkpad 41Awww33","website":"yahoo"},
{"name":"Lenovo Thinkpad 41A424448","website":"google"},
{"name":"Lenovo Thinkpad 41A429rr8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ff8","website":"ebay"},
{"name":"Lenovo Thinkpad 41A429ss8","website":"rediff"},
{"name":"Lenovo Thinkpad 41A429sg8","website":"yahoo"}]`

var data = JSON.parse(j, function(key, value) { 
      if ( value.website === "yahoo" ) yahoo.push(value); 
      return value; })

console.log( yahoo )

Solution 7 - Javascript

I know the question explicitly says JS or jQuery, but anyway using lodash is always on the table for other searchers I suppose.

From the source docs:

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
 
// The `_.matches` iteratee shorthand.
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.filter(users, ['active', false]);
// => objects for ['fred']
 
// The `_.property` iteratee shorthand.
_.filter(users, 'active');
// => objects for ['barney']

So the solution for the original question would be just one liner:

var result = _.filter(data, ['website', 'yahoo']);

Solution 8 - Javascript

It iterates through the json objects, and searches each value you are concerned about, 'website', and if it equals "yahoo" you can then return that value or do whatever you like there. Right now it just logs that element to the console.

jsonObj.forEach(function (element, index) {
	if(element['website'] === 'yahoo'){
		console.log('found', element)	
    }
})

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMe7888View Question on Stackoverflow
Solution 1 - JavascriptRoyi NamirView Answer on Stackoverflow
Solution 2 - JavascriptOlegView Answer on Stackoverflow
Solution 3 - JavascriptEnayatView Answer on Stackoverflow
Solution 4 - JavascriptavendaView Answer on Stackoverflow
Solution 5 - Javascripttalha06View Answer on Stackoverflow
Solution 6 - JavascriptSlaiView Answer on Stackoverflow
Solution 7 - JavascriptstratovariusView Answer on Stackoverflow
Solution 8 - Javascriptuser3738936View Answer on Stackoverflow