Pushing the right ID Product to an array | Scrimba | Page 1

crimson ether Oct 31, 2022, 9:45 AM

#

Sigh, this is what I get for not checking the work of the people I help.

Question for you: in your handleFoodClick function, what is the menuArray.filter doing? @green geyser

green geyser Oct 31, 2022, 9:46 AM

#

looking for the right id in the array?

crimson ether Oct 31, 2022, 9:47 AM

#

Ok, replace your current handleFoodClick function with this:

function handleFoodClick(foodId){ 
    console.log("input ID: ", foodId)
    let targetFoodObj = menuArray.filter(function(food){
        return food.id === foodId
        
    })[0]
    console.log("outputID: ", targetFoodObj)
    
}

(All I've done is add a couple of console logs to it - nothing else has changed)

green geyser Oct 31, 2022, 9:49 AM

#

yeah but I still get undefined with targetFoodObj

crimson ether Oct 31, 2022, 9:49 AM

#

Exactly, so what is your filter function doing?

#

(answer: nothing)

green geyser Oct 31, 2022, 9:53 AM

#

ahh okay, yeah

crimson ether Oct 31, 2022, 9:54 AM

#

To be frank, there are 2 problems here. First, you started coding without thinking about WHAT you want your program to do. Second, you gave your program a set of instructions that you don't fully understand. Don't worry, these are very common errors and can be fixed

green geyser Oct 31, 2022, 9:55 AM

#

Yeah I thought I need the ID target so I can get the right product when I click on +. Then I want to push that right product to an array.

#

I got the .filter from my last project and thought I needed that anyways

crimson ether Oct 31, 2022, 9:57 AM

#

Ok. Let's forget about what functions we're going to use, and think about WHAT we want our program to do. Break down your task into the most basic instructions (imagine you're talking to a very small child).

green geyser Oct 31, 2022, 9:58 AM

#

yeah ok

#

if right product is pushed, copy paste the content to another array

#

*clicked

crimson ether Oct 31, 2022, 10:00 AM

#

Not bad. In my opinion there are 4 basic steps to this:

get ID of clicked button
match clicked ID with ID of menu item in menu array
put matched menu item from menu array into order array
display order array on the screen

green geyser Oct 31, 2022, 10:00 AM

#

I got the first one, right?

#

and even the 2nd one

crimson ether Oct 31, 2022, 10:01 AM

#

Yes, but we need to think further. Now we know what we want our program to do, we need to think about what information our program needs to do the task. So, what information does our program need?

green geyser Oct 31, 2022, 10:02 AM

#

it wants to know which food it needs to push where

crimson ether Oct 31, 2022, 10:03 AM

#

How does the program know which food item to put into the order?

green geyser Oct 31, 2022, 10:05 AM

#

I am really confused how to push from 1 array to another :/

#

I only know how to hardcode the push to an array

crimson ether Oct 31, 2022, 10:08 AM

#

You're still thinking in syntax - I think you to think in English. Forget arrays and functions and all of that. We're planning here. (We'll get to how to push stuff into arrays and do all that later, I promise).

green geyser Oct 31, 2022, 10:08 AM

#

Ok

crimson ether Oct 31, 2022, 10:09 AM

#

Imagine this: I come up to you and say "put that food item on my order" - what would you say in reply?

green geyser Oct 31, 2022, 10:09 AM

#

sure

#

and click + 1

crimson ether Oct 31, 2022, 10:10 AM

#

"That's the wrong item"

green geyser Oct 31, 2022, 10:10 AM

#

which one?

#

I would ask

crimson ether Oct 31, 2022, 10:11 AM

#

Right. So I reply "number 1"

green geyser Oct 31, 2022, 10:11 AM

#

I say no problem and press number 1

crimson ether Oct 31, 2022, 10:11 AM

#

But what does number 1 mean?

green geyser Oct 31, 2022, 10:12 AM

#

it means Hamburger in my array

#

which cost 12 and is beef, cheese and lettuce

crimson ether Oct 31, 2022, 10:13 AM

#

Yes, you know that, but does the program know that?

green geyser Oct 31, 2022, 10:13 AM

#

no

crimson ether Oct 31, 2022, 10:13 AM

#

So, what information does your program need to do the task?

green geyser Oct 31, 2022, 10:14 AM

#

It needs to know which item is what?

crimson ether Oct 31, 2022, 10:14 AM

#

Good, what else?

green geyser Oct 31, 2022, 10:14 AM

#

it needs to know which item was clicked

#

and where to put it

crimson ether Oct 31, 2022, 10:15 AM

#

Good, so in total we need these pieces of information:

the selected menu item
all possible menu items
where to put the selected menu items

green geyser Oct 31, 2022, 10:16 AM

#

yes

crimson ether Oct 31, 2022, 10:17 AM

#

It may seem silly but that's how we need to think when we're programming - What do we want our program to do, and what information does our program need. If we don't know that, we have no chance

green geyser Oct 31, 2022, 10:17 AM

#

yeah it makes sense

crimson ether Oct 31, 2022, 10:18 AM

#

Now, look at your code, do you have all the pieces of information you need?

green geyser Oct 31, 2022, 10:18 AM

#

no

#

I still don't know how to get them from the array and paste them to another one

crimson ether Oct 31, 2022, 10:19 AM

#

You do, you're just not understanding the instructions you're giving your program

green geyser Oct 31, 2022, 10:20 AM

#

yes

#

I know I can write orderArray.push[]

#

Something like this? orderArray.push[menuArray]

crimson ether Oct 31, 2022, 10:21 AM

#

You can, but before that we need to get the correct menu item that the user selects

#

Replace your current handleFoodClick function with this:

#

function handleFoodClick(foodId){ 
    console.log("input ID: ", foodId, typeof foodId)
    let targetFoodObj = menuArray.filter(function(food){
        console.log("food.id: ", food.id, typeof food.id)
        return food.id === foodId
        
    })[0]
    console.log("outputID: ", targetFoodObj, typeof targetFoodObj)
    
}

#

Just as before, the logic is the same, I've just added more console logs

green geyser Oct 31, 2022, 10:23 AM

#

ok yes

crimson ether Oct 31, 2022, 10:23 AM

#

Do you see the problem?

green geyser Oct 31, 2022, 10:24 AM

#

the input is a string?

#

and it lists every food.id

crimson ether Oct 31, 2022, 10:26 AM

#

Our input ID is a string, but food.id is a number

#

question for you: What's the difference between == and === ?

green geyser Oct 31, 2022, 10:27 AM

#

no Idea, === is absolut and = not or something

#

but == no idea

#

ahh

#

I have == now

crimson ether Oct 31, 2022, 10:28 AM

#

Ok, both of them are comparison operators (i.e. compare this to that and tell me if they are equal). The difference is that == only checks the values, whereas === checks the types as well as the values.

green geyser Oct 31, 2022, 10:29 AM

#

I got now the WHOLE name of the thing :DDD

#

So I need ==

#

and now push targetFoodObj to the empty ARRAY

crimson ether Oct 31, 2022, 10:30 AM

#

Yep. So, for troubleshooting you need to check not only the value of things, but the type of them too. typeof is very useful for that

green geyser Oct 31, 2022, 10:30 AM

#

ahh ok

crimson ether Oct 31, 2022, 10:31 AM

#

Whenever you're doing any kind of comparison, always double check the variable types

green geyser Oct 31, 2022, 10:33 AM

#

yes I will do that

#

orderArray.push(targetFoodObj) sends the Product to the array, but I need only name and price

crimson ether Oct 31, 2022, 10:34 AM

#

For now I would just leave that as it is. Better to have too much information than too little

green geyser Oct 31, 2022, 10:34 AM

#

But the name?

crimson ether Oct 31, 2022, 10:35 AM

#

What about the name?

green geyser Oct 31, 2022, 10:35 AM

#

I need that to be pushed aswell

#

orderArray.push(targetFoodObj["name", "price"])

#

like this?

crimson ether Oct 31, 2022, 10:36 AM

#

Is it not inside the array already?

green geyser Oct 31, 2022, 10:36 AM

#

oh you want me to push the whole thing?

#

orderArray.push(targetFoodObj)

crimson ether Oct 31, 2022, 10:36 AM

#

yes

green geyser Oct 31, 2022, 10:36 AM

#

ok

#

now I would build a template string where I would show the clicked item

#

I would make an IF (orderArray > 0) ?

#

wait no, IF (orderArray.length > 0)

green geyser Oct 31, 2022, 11:01 AM

#

I am off for today, thanks for all your help

#Pushing the right ID Product to an array