Array.filter not return exactly properties of object?

Question

I'm trying to understand some built in method of array. Here is my code for small function, I want to display "name" and "category" of each item, which is store in inventory with total value larger than 1000. But when I try to print bigPrice, it always display all of property of each object and I only want to display "name" and "category". Anyone can help?

var products = [
{name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'},
{name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'},
{name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'},
{name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'},
{name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'},
{name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'},
{name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'}
];

var bigPrice = products.filter(function(item) {
if (item.quantity * item.unitPrice > 1000) {
    return item.name + ' || ' + item.category;
}
});

bigPrice;

Answer 1

Whatever you return to the function passed to filter is only tested for truthyness, nothing else. If you return a (non-empty) string, it's determined to be truthy, and is then immediately discarded. For what you're doing, you could use .filter followed by .map , but it would be better to use reduce so you only have to iterate over the array once:

 var products = [ {name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'}, {name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'}, {name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'}, {name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'}, {name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'}, {name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'}, {name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'} ]; var bigPrice = products.reduce((a, { quantity, unitPrice, name, category }) => { if (quantity * unitPrice > 1000) a.push(name + ' || ' + category); return a; }, []); console.log(bigPrice); 

Answer 2

filter function doesn't return the custom value, you need to use map and filter together or alternatively reduce

 var products = [ {name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'}, {name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'}, {name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'}, {name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'}, {name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'}, {name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'}, {name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'} ]; var bigPrice = products.map(function(item) { if (item.quantity * item.unitPrice > 1000) { return item.name + ' || ' + item.category; } }).filter(item => typeof item !== 'undefined'); console.log(bigPrice) 

or

 var products = [ {name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'}, {name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'}, {name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'}, {name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'}, {name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'}, {name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'}, {name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'} ]; var bigPrice = products.filter(function(item) { return (item.quantity * item.unitPrice) > 1000 }).map(item => item.name + ' || ' + item.category); console.log(bigPrice) 

Answer 3

You can use map method and destructing by applying a provided callback function for every item from your given array .

 var products = [ {name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods'}, {name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods'}, {name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods'}, {name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods'}, {name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods'}, {name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade'}, {name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods'} ]; var bigPrice = products.filter((item)=> item.quantity * item.unitPrice > 1000) .map(({name,category})=>(name + '||' + category)); console.log(bigPrice); 

Answer 4

filter will create a new array with all the elements that return a truthy value from the function. You could use filter and then map :

var bigPrice = products.filter(function(item) {
  return item.quantity * item.unitPrice > 1000;
}).map(function(item) {
  return item.name + ' || ' + item.category;
});

Answer 5

Use Array#reduce for it because you need to filter and map at the same time:

 var products = [{ name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods' }, { name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods' }, { name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods' }, { name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods' }, { name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods' }, { name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade' }, { name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods' } ]; var bigPrice = products.reduce(function(res, item) { if (item.quantity * item.unitPrice > 1000) { res.push(item.name + ' || ' + item.category); } return res; }, []); console.log(bigPrice); 

Answer 6

You try to do two things at the same time.

• Array#filter returns an array of the same items, or not depending of the return value of the callback. Here, it is used to differentiate between smaller or greater prices.

• Array#map returns for every item of the array a possible changed item, which is here a new streing instead of an object.

You could take a functional chanied approach by filtering first the wanted items of the array and the map the wanted properties.

This solution uses destructuring assignment for the properties.

 var products = [{ name: 'A', quantity: 2, unitPrice: 100, category: 'Electronic goods' }, { name: 'B', quantity: 1, unitPrice: 400, category: 'Electronic goods' }, { name: 'C', quantity: 5, unitPrice: 15, category: 'Clothing goods' }, { name: 'D', quantity: 2, unitPrice: 95, category: 'Clothing goods' }, { name: 'E', quantity: 300, unitPrice: 10, category: 'Home, Garden goods' }, { name: 'F', quantity: 60, unitPrice: 150, category: 'Handmade' }, { name: 'G', quantity: 10, unitPrice: 105, category: 'Automotive goods' }], big = products .filter(({ quantity, unitPrice }) => quantity * unitPrice > 1000) .map(({ name, category }) => [name, category].join(' || ')); console.log(big);