Push is not a function

function bindCheckbox() {
		let inputCheckbox = document.querySelectorAll('input[type=checkbox]');
		let favoriteList = document.getElementById('favorites');

			inputCheckbox.forEach(function(element, index) {
				inputCheckbox[index].addEventListener('change', function() {
					let fav = localStorage.getItem('favoList') || [];
					console.log(fav);
					let joke = this;
					if(joke.checked && joke.parentNode.parentNode.id === 'list-of-jokes') { 
					   addFavorite(joke.id, joke.parentNode.innerText, fav);
					} 
				});
		}
	}


	function addFavorite(idNum, jokeText, fav) {
		let norrisJoke = [{
			id: idNum,
			joke: jokeText
		}];
		console.log(fav);
		let favorites = fav;

		console.log(idNum, jokeText);
		console.log(norrisJoke);
		favorites.push(norrisJoke);
		localStorage.setItem('favoList', JSON.stringify(norrisJoke));
	}

the value should be pushed into fav element, but that is kind of inside a closure. So the value should be pushed inside an innerfunction and stored inside an element inside the outer function. The localstorage outputs [object object] and no value of norrisjoke.

https://codepen.io/chichichi/pen/JMqvyP?editors=1111

Check the added codepen

let fav = localStorage.getItem(‘favoList’) || []; inside bindCheckbox() function

Oke I get it now. How could I solve this correctly.

To add a little to Randell’s excellent answer…

Just as a general debugging concept, whenever you see “[blank] is not a function of …”, that is javascript telling you that whatever prototype method you are trying to use is not a prototype of that variable type. In this case, push is a method defined for arrays, not objects. You would get the error if you tried to apply it to a string. Whenever I get that error, the first thing I do is check to see I have the right method and then I check the typeof of that variable. Usually I’ve made a mistake and the variable isn’t the type I thought it was.

1 Like

Oke that is a good one, will use that often.

Thanks for your feedback.

It outputs the json values when it has been clicked on.

Ye, but I think you should not use codepen for this, cuz it would not store in localstorage…

When I click on a checkbox it will pass an id and text, but looking at the localStorage I see [object object]. I know the typeof storage is object and should be an array. The question from my side is, how should I turn an object into an array?

	function addFavorite(jokeId, jokeText) {
		let storage = localStorage.getItem('favoList') || [];
		let norrisJoke = {
			id: jokeId,
			joke: jokeText
		};
		console.log(norrisJoke);
		storage.push(norrisJoke);
		console.log(typeof storage);
		localStorage.setItem('favoLis', norrisJoke);
    }

The data in localstorage must be in a string format so when you are calling setItem you need to stringify it.

localStorage.setItem('thedata', JSON.stringify(your_object));

And when you retrieve the data from local storage you have to parse it back to an object.

 localStorage.getItem(JSON.parse('thedata')) ;

typeof favorites is still an object… —> let fav = JSON.parse(localStorage.getItem(‘favoList’))|| [];

When I checkmark the first input checkbox no error is showing up, but after clicking the second, third, fourth and so on.

Error message: Uncaught TypeError: favorites.push is not a function

I would recommend you to copy all the codes from codepen and save it locally.Open this with google chrome browser.

Found the answer :stuck_out_tongue: I picked up the wrong variable (norrisJoke), but that should be variable favorites in this context.

	function addFavorite(jokeId, jokeText, fav) {
		let norrisJoke = {
			id: jokeId,
			joke: jokeText
		};
		let favorites = fav;
		console.log(fav);

		console.log(JSON.parse(norrisJoke.id));
		console.log(norrisJoke.joke);
		favorites.push(norrisJoke);
		// console.log(typeof result);

		localStorage.setItem('favoList', JSON.stringify(favorites));
		console.log(favorites.length);
	}

The goal of this project is to improve my vanilla js :slight_smile: I get your point and then I need to do something so it would not add a new list of jokes infinitely. Maybe disabling them or something like that :stuck_out_tongue:

Cool, codes looks much cleaner now

Would you like to join my front end slack community (810+ members). Your expertise would be absolutely useful for many of them.

Ok great man, you teach me a lot new things about JavaScript. Very grateful for that :slight_smile: