How to filter JSON Data in JavaScript or jQuery?

Question

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"

@SalmanA I dont know anything about GREP..can you tell me how can use GREP in above example — Me7888
– Me7888, Commented May 18, 2014 at 10:41

Royi Namir · Accepted Answer · 2018-08-05 06:40:59Z

88

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

edited Aug 5, 2018 at 6:40

user84118

answered May 18, 2014 at 10:42

Royi Namir

149k145 gold badges502 silver badges833 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Salman Arshad Over a year ago

Returning values from .each will not work (false can be returned to terminate the loop but that is about it).

Me7888 Over a year ago

@RoyiNamir var as=$(temp).filter(function (i,n){return n.website==='Google'});alert(as);

Royi Namir Over a year ago

@Me7888 Yes. that's correct. assume json is an object. ( not its string representation).

Me7888 Over a year ago

@RoyiNamir HI..... possible to get two website list like : return n.website==='Google' || n.website==='Yahoo'

Royi Namir Over a year ago

@Me7888 Are you asking or saying ?

|

Enayat · Accepted Answer · 2018-10-05 16:40:04Z

42

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)

edited Oct 5, 2018 at 16:40

answered Feb 2, 2018 at 14:01

Enayat

4,0621 gold badge35 silver badges52 bronze badges

3 Comments

probitaille Over a year ago

This code doesn't filter data by "yahoo". It change all of them to "yahoo". The question is how to get data where website is equal to "yahoo".

Enayat Over a year ago

@probitaille Thanks for the heads up. I corrected the code.

probitaille Over a year ago

It's works as expected now. Thank you for the correction.

Oleg · Accepted Answer · 2017-06-03 11:52:22Z

41

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

edited Jun 3, 2017 at 11:52

answered May 18, 2014 at 10:48

Oleg

9,4092 gold badges45 silver badges59 bronze badges

10 Comments

Royi Namir Over a year ago

filter is not widely support ( as you mentioned)

Oleg Over a year ago

@RoyiNamir Please read the beginning of my answer. And by the way: caniuse.com/#search=filter

Royi Namir Over a year ago

Ok then. ( im not the downvoter:-)) p.s. why the link ? I already know that it is not supported widely in older Ie's

Oleg Over a year ago

I would argue that it, in fact, is widely supported (older IEs run on XP which is discontinued anyway). Hence the link. Besides, including a shim is much better than including the entire jQuery.

Oleg Over a year ago

He never says that he has jQuery on page already. The question is JavaScript or jQuery. And jQuery in itself is redundant anyway.

|

muttonUp · Accepted Answer · 2016-09-05 16:14:12Z

22

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

}

edited Sep 5, 2016 at 16:14

muttonUp

6,7872 gold badges44 silver badges57 bronze badges

answered Nov 12, 2014 at 3:47

avenda

5021 gold badge5 silver badges15 bronze badges

1 Comment

Syed Uzair Uddin Over a year ago

Great Work, What if i want to pass 2 or more filter in this line: "var filtered_json = find_in_object(JSON.parse(my_json), {website: 'yahoo'});"

talha06 · Accepted Answer · 2014-05-18 10:49:58Z

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

Slai · Accepted Answer · 2018-01-03 12:43:36Z

3

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 )

answered Jan 3, 2018 at 12:43

Slai

23k5 gold badges49 silver badges55 bronze badges

Comments

stratovarius · Accepted Answer · 2017-06-09 13:41:49Z

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']);

Don M · Accepted Answer · 2017-08-29 17:58:56Z

0

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

answered Aug 29, 2017 at 17:58

Don M

9861 gold badge10 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to filter JSON Data in JavaScript or jQuery?

8 Answers 8

6 Comments

3 Comments

10 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

6 Comments

3 Comments

10 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related