Weird JSON.parse issue

[divineaverage]

Hey Conor! Running into a super-weird issue. Out of the blue, line 11 on cart.js seems to have stopped working correctly - it's pulling an undefined array for some reason, no matter what I put into the cart. I haven't touched this line, and everything was working until this error suddenly cropped up. Have you run into this? Is there some "duh" fix I'm not seeing?

Sidenote: still getting this runtime.lastError issue as well, which generally doesn't cause issues but is still weird so I'm including in screenshot.

[AccessiT3ch]

@divineaverage - not sure why the cart would suddenly not be pulled from local storage correctly, have you double checked the application tab in dev tools to make sure the "cart" is in local storage?

One thing we can do to protect against this type error is to use ternary "or" pipes (||) to fall back to a string of an empty array ("[]"). It's important to never pass empty strings into JSON.parse(), otherwise you'll get another cryptic error, by passing the stringifyied array as a backup then at the very least the cart constant on line 11 will always be an array.

const cart = JSON.parse(localStorage.getItem("cart") || "[]");

Another thing to consider, do you still need this line since you've got a function to safely return the cart from localStorage? (You may want to also check the length of the string in your if statement as well!)

[divineaverage]

OK! FIXED! And I got the arithmetic for modifying the cart working! And I was able to update the HTMLCollection... but not the DOM. I have tried a few different things but my logic is failing me, and I am certain this is a very "DUH" moment but I'm missing it (probably because I did this all such a wacky way, lol). How do I easily update the DOM with these new values?

[AccessiT3ch]

@divineaverage It looks like you're trying to update the collections of DOM elements, rather than the individual DOM elements (within those collections) that need to be updated. Since you're iterating over an array of input elements, you can use the iterator provided by forEach to reference the correlating paragraph element from the collection of sub-total elements:

subtotalHTMLCollect[i].innerHtml = newSubtotal;

Then I don't think you have to update the anything on the input elements b/c their default behavior should be enough to handle updating the value of that input.

[divineaverage]

Ok, tried that again and it's still not updating the page. I know I'm missing something simple here! SO CLOSE!