使用特定的JSON键值对创建数组

Question

Let's say I have a JSON array like this

[{"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"}]

I want to get an array of all the name s that have the website value equal to google .

Firstly, to filter the JSON array to contain only entries where the website is google , I have this:

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

which gives the following result:

[{"name":"Lenovo Thinkpad 41A4298","website":"google"},
    {"name":"Lenovo Thinkpad 41A2222","website":"google"},
    {"name":"Lenovo Thinkpad 41A424448","website":"google"}]

What do I need to do next to get the name in a separate array. I tried doing this:

let new_array = [];
  new_array.push(data_filter.body.name)

which gives me an undefined error for name . I also tried:

new_array.push(data_filter.name)
  new_array.push(data_filter.body[0].name)

But none of the approaches work. What am I missing here?

FYI - JSON data and Filter approach is mentioned in this SO post - credits to the OP and answers.

Answer 1

You need to use double equals sign to compare == instead of single = . When it's single, you change (assign) element.website to "google" . The result of that expression is the value you set, which is "google" and it is a truthy value and therefore all elements pass the test of filter() .

 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 == "google"); var names = data_filter.map(function (elem) { return elem.name; }); console.log(names); 

To get the names after you've filtered the results, use map() .

Your code didn't work because you try to access a property body of the filtered results. The filtered results consist of an array of your original results, but only the entries that pass the test. Since your original entries don't have a body property, the filtered results won't have it either. And also, you tried data_filter.body which will never exist because data_filter will always be an Array and arrays don't have a body property.

Read more about filter() here .

Answer 2

You can use map method in combination with filter and pass callback provided functions for each of them.

 let 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"}] names = data.filter(function(item){ return item.website == 'google'; }).map(function(item){ return item.name; }); console.log(names) 

Another approach is to use arrow functions and destructure the arguments.

 let 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"}] names = data.filter(({website}) => website == 'google').map(({name}) => name); console.log(names) 

Answer 3

Use map after filter (also correct = with === )

var data_filter = data.filter( element => element.website === "google").map( s => s.name );

Or if you don't want to iterate twice, use reduce

data.reduce( (a, c) => {
   c.website === "google" ? a.push( c.name ) : "";
   return a; //return accumulator
} , []); //initialize accumulator

Answer 4

Use reduce to push to another array based on a condition:

 const 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"}]; const nameArr = data.reduce((nameArr, { name, website }) => { if (website === 'google') nameArr.push(name); return nameArr; }, []); console.log(nameArr); 

Answer 5

You can simply map over the object array and IF item.website === 'google', push item.name into an array. See the working solution below...

 let theJSON = [ {"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"} ] let nameArray = [] theJSON.map((item) => { if (item.website === 'google') { nameArray.push(item.name) } }) console.log(nameArray)