0

I'm studying Javascript and I have this example using filter...

I have an object called fruits like that...

let data = {
        "fruits": [{
        "id": 0,
        "name": "plum",
        "description": "A plum is a purple fruit.",
        "image": "https://cdn.shopify.com/s/files/1/0610/2881/products/cherries.jpg?v=1446676415",
        "price": 220
            }, 
            {
                "id": 1,
                "name": "Apple",
                "description": "An apple is a sweet, edible fruit produced by an apple tree. Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus.",
                "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/265px-Red_Apple.jpg",
                "price": 35
            },
            {
                "id": 2,
                "name": "Banana",
                "description": "A banana is an edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called plantains, distinguishing them from dessert banana",
                "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Bananas_white_background_DS.jpg/320px-Bananas_white_background_DS.jpg",
                "price": 12
            },
            {
                "id": 3,
                "name": "Grapes",
                "description": "A small bunched fruit used to make wine",
                "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Table_grapes_on_white.jpg/320px-Table_grapes_on_white.jpg",
                "weight": 0.1,
                "price": 45
            }...

I have a cart with the items of fruits.

cart = [0, 3, 4, 5, 3]

this is the part that I don't understand...

const getCostOf = id => (data.fruits.filter(item => item.id == id))[0].price

What are doing

[0].price

??? Why I have to get the element [0] if item is going to change every step...

If I have other function...

const getTotal = cart => {
  let total = 0;
  cart.map(item => total += getCostOf(item))
  return total;
}

Why in getConstOf

The example is using [0].price and not [item].price?

Improve this question
2
  • getCostOf method will always return an array with 1 element assuming it's provided with a valid id. You can access an array index with [index_number], so 0 being always there it's safe to call it straight away. The filter method will always keep the items that returns true. Commented Oct 15, 2021 at 16:47
  • Your filter method will not work because your data variable is not an array but an object. You need to first get down the fruits key in order to make use of different Array.prototypes. for example start of with data.fruits Then you can do filter.. data.fruits.filter(item => item) Commented Oct 15, 2021 at 17:20

5 Answers 5

Reset to default
2

You said you had a variable data which is an array. But from your example that looks like your variable data is in fact an object and not an array. And the filter method can only used for array's and not for object.

So what you need to do in order to make the filter method to start filtering is to pierce into your object and grab the "fruits" key as it the array in your example and you can do it like this:

data.fruits then you can filter those objects inside the array of fruits. ie

const getCostOf = id => data.fruits.filter(item => item.id == id))[0].price

As for your [0].price without it, you will have a return of the array of object that your id parameter matches with the item.id. So [0] you are saying you want the first element in the array to be returned. And now you are returning the object from the array. then pinpoint further you wanted the price so .price will give you the price.

So at the end in example id = 3 then the price would be 45 from your result

const getCostOf = id => data.fruits.filter(item => item.id === id)[0].price

console.log(getCostOf(3))
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

filter() returns an array with all items that match the given criteria. In this case item => item.id == id so all items that match the provided id. The [0] after it takes the first matching element and .price will then give you the price of the matching item.

However if you have a lot of products a better option for finding the first product is find(). Which iterates until it finds a match and directly returns it instead of trying to find all matches.

const getCostOf = id => data.fruits.find(item => item.id == id).price;

Or if you call getCostOf() often you might want to prepare the data structure and index the items based on id in a Map. This does introduce some overhead, but will pay off if you often need to lookup items.

const fruits = new Map(data.fruits.map(item => [item.id, item]));
const getCostOf = id => fruits.get(id).price;

This last solution assumes the ids are unique. If they are not, later versions of an item with the same id will override earlier defined versions. Resulting in the last item returned instead of the first one. You also need to update fruits if data.fruits is replaced or items are added/removed from the array.

Improve this answer

2 Comments

If you look carefully in his example his data variable is in fact an object and not an array. So none of the filter or the find methods will work.
@Mohamed That's a detail. OP should deliver a consistent example. I based this answer of OPs getCostOf definition, not the data structure. This answer tries to explain a concept and changing data into data.fruits is easily done.
0

Because filter() function returns an array with the required product and the price is the price property for this product.

Improve this answer

Comments

0 
const getCostOf = id => (data.fruits.filter(item => item.id == id))[0].price

This code can be written as

 const getCostOf = id => { 
let fruits  = data.fruits.filter(item => item.id == id)) // filter will array return an array;
let fruit  = fruits[0]; // selecting first match
return fruit.price;
}

A better way to write it will be to use find since find only returns first match not array.

 const getCostOf = id => data.fruits.find(item => item.id == id).price
Improve this answer

1 Comment

If you look carefully in his example his data variable is in fact an object and not an array. So none of the filter or the find methods will work.
0

data.fruits.filter(item => item.id == id) creates an array with just one product, the one with the id given in the parameter. Accessing this array with [0] will get the one product in the array and .price will return its price

Improve this answer

2 Comments

If you look carefully in his example his data variable is in fact an object and not an array. So none of the filter or the find methods will work.
ah yeah i forgot to write fruits

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.