Adding Items to an Empty Array with Javascript

Question

I'm just learning Javascript and need to build a cart. I am using a drop-down menu to select the items which are stored in another array. I then want to push the selected item to an empty array called "cart"

This is the code I'm using to select the data from the catalog array inorder to push it to the cart array:

let addFCat = document.getElementById('addfromCat');

function cat_Cart(){ 

  // find out the index of the item loaded
  let e = document.getElementById("productList");
  let itemIndex = e.options[e.selectedIndex].value;
  console.log(itemIndex);

  // update item to cart
  cart.push(catalog[itemIndex]);
  localStorage.setItem("cart", JSON.stringify(cart));

  // alert with updated total
  // alert(`You added ${cartItems.name} to your Cart`)

}

But for some reason my cart[] remains empty.

If I manually type: cart.push(catalog[enter index here]) in the console, and then: cart.length; the cart updates. What am I doing wrong, that it won't update my cart within the function?

(PS. I'm using the console.logs to check the code is running)

I assume you're calling the cat_Cart function. How are you logging/checking the contents of cart after you push to it? — Nick Parsons
– Nick Parsons, Commented Jul 11, 2022 at 9:17
Where is the array declared? And did you use "var" or "let"? — BlackAnubis7
– BlackAnubis7, Commented Jul 11, 2022 at 9:18
You may add console.log(catalog[itemIndex]) to print the content of catalog[itemIndex] for debugging. — The KNVB
– The KNVB, Commented Jul 11, 2022 at 9:19
Also, when you say your array is empty, does it look like [] or does it contain something like [undefined] or [null]? — Nick Parsons
– Nick Parsons, Commented Jul 11, 2022 at 9:21
Apologies, I had previously had console.log(catalog[itemIndex]) to double-check it was accessing the correct item from the array. It was correctly identifying the item. @NickParsons I was using the console to check the contents of the cart. It returned [], not null or undefined, but no items inside. — SunshineJo
– SunshineJo, Commented Jul 11, 2022 at 10:44

Rodericus Ifo Krista · Accepted Answer · 2022-07-11 10:05:26Z

2

I think it is because you do refresh your browser, and it causes your cart[] to be empty, I suggest you to store the cart array in empty condition, to localStorage first, and get the updated value like this

const cart = []

localStorage.setItem("cart", JSON.stringify(cart));

function cat_Cart(){ 

  const getCart = JSON.parse(localStorage.getItem("cart"));

  // find out the index of the item loaded
  let e = document.getElementById("productList");
  let itemIndex = e.options[e.selectedIndex].value;
  console.log(itemIndex);

  // update item to cart
  getCart.push(catalog[itemIndex]);
  localStorage.setItem("cart", JSON.stringify(getCart));

  // alert with updated total
  // alert(`You added ${cartItems.name} to your Cart`)

}

local storage will help you to save any data, and it will not to be deleted even though you refresh the browser. thank you

edited Jul 11, 2022 at 10:05

answered Jul 11, 2022 at 10:04

Rodericus Ifo Krista

943 bronze badges

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

Collectives™ on Stack Overflow

Adding Items to an Empty Array with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related