我如何遍历所有ID？

Question

Check out the api --> https://api.icndb.com/jokes/random/10

Everytime when the user clicks on a specific joke, it will be added to the favorite list.

To keep the code concise I will only show the function itself:

  (function() { "use strict"; const getJokesButton = document.getElementById('getData'); getJokesButton.addEventListener('click', getData); loadLocalStorage(); function loadLocalStorage() { let storage = JSON.parse(localStorage.getItem('favoList')) || []; let listOfFavorites = document.getElementById("favorites"); let emptyArray = ''; if(storage.length > 0) { for(let i = 0; i < storage.length; i++) { let idNumberJoke = storage[i].id; emptyArray += `<li><input type="checkbox" id='${idNumberJoke}'/> User title: ${storage[i].joke}</li>`; listOfFavorites.innerHTML = emptyArray; } } else { return false; } } // fetch data from api function getData() { let listOfJokes = document.getElementById("list-of-jokes"); fetch('https://api.icndb.com/jokes/random/10') .then(function(res) { return res.json(); }).then(function(data) { // variable is undefined because it is not initialized. Therefore at some empty single quotes let result = ''; console.log(data.value); data.value.forEach((joke) => { result += `<li><input type="checkbox" class='inputCheckbox' id='${joke.id}'/> User title : ${joke.joke}</li>`; listOfJokes.innerHTML = result; }); bindCheckbox(); }).catch(function(err) { console.log(err); }); } function clickedButton() { getJokesButton.setAttribute('disabled', 'disabled'); getJokesButton.classList.add('opacity'); } function bindCheckbox() { let inputCheckbox = document.querySelectorAll('input[type=checkbox]'); let elems = document.getElementById('list-of-jokes').childNodes; let favoriteList = document.getElementById('favorites'); let fav = JSON.parse(localStorage.getItem('favoList'))|| []; if(elems.length > 0) { inputCheckbox.forEach(function(element, index) { inputCheckbox[index].addEventListener('change', function() { let joke = this; if(joke.checked && joke.parentNode.parentNode.id === 'list-of-jokes') { joke.checked = false; favoriteList.appendChild(joke.parentNode); addFavorite(joke.id, joke.parentNode.innerText, fav); } if(joke.checked && joke.parentNode.parentNode.id === 'favorites') { joke.checked = false; removeFavorite(joke, index); } }); }); } clickedButton(); } function removeFavorite(favorite, index) { let favoriteCheckBox = favorite; let i = index; // convert iterable object to an array, otherwise splice method would give an error. let favoriteListItem = Array.from(favoriteCheckBox.parentNode); favoriteListItem.splice(i, 1); document.getElementById('list-of-jokes').appendChild(favorite.parentNode); localStorage.setItem('favoList', JSON.stringify(favoriteListItem)); } // store favorites in localStorage function addFavorite(jokeId, jokeText, fav) { let norrisJoke = { id: jokeId, joke: jokeText }; let favorites = fav; for (let i = 0; i < favorites.length; i++) { if(favorites[i].id !== norrisJoke.id) { favorites.push(norrisJoke); } } // favorites[i].id !== norrisJoke.id // always get the object before the push method and pass it into stringify localStorage.setItem('favoList', JSON.stringify(favorites)); } // function which will randomly add one joke to favorite list every 5 seconds // function need a button which allows you to turn on and off this auto add function })(); 

 <div class="inner-body"> <button id="getData">GET Jokes</button> <div class='inner-block'> <h2>Chuck Norris Jokes</h2> <ul class='unordered-list' id="list-of-jokes"> </ul> </div> <div class='inner-block'> <h2>Favorites</h2> <ul class='unordered-list' id="favorites"> </ul> </div> </div> 

The keys and values would not be pushed into localStorage, the only thing I see is an empty [] in localStorage. The norrisJoke object literal will be dynamically changed. So how could I make this function works?

Too complex, but click on the link below and scroll down to the bottom:

https://codepen.io/chichichi/pen/Gyzzvb

Answer 1

let favorites = JSON.parse(localStorage.getItem('favoList'))|| {};

favorites[norrisJoke.id] =norrisJoke.joke 

Why don't you use a map in place of an array?

Also as @fl9 points out your for loop will never start off! because favorites.length is 0 to begin with

But I want to check duplicates before the joke will be pushed into favorite list

By definition a hash will not allow duplicate entries, so no need to worry about duplications

Run localStorage.getItem('favoList') in the console of this fiddle :

(function() {
    "use strict";

    const getJokesButton = document.getElementById('getData');
    getJokesButton.addEventListener('click', getData);

    loadLocalStorage();

    function loadLocalStorage() {
        let storage = JSON.parse(localStorage.getItem('favoList')) || [];
        let listOfFavorites = document.getElementById("favorites");
        let emptyArray = '';
        if(storage.length > 0) {
            for(let i = 0; i < storage.length; i++) {
                let idNumberJoke = storage[i].id;
                emptyArray += 
                `<li><input type="checkbox" id='${idNumberJoke}'/> User title: ${storage[i].joke}</li>`;
                listOfFavorites.innerHTML = emptyArray;
            }
        } else {
            return false;
        }
    }

    // fetch data from api
    function getData() {
        let listOfJokes = document.getElementById("list-of-jokes"); 

        fetch('https://api.icndb.com/jokes/random/10')
        .then(function(res) {
            return res.json();
        }).then(function(data) { 
            // variable is undefined because it is not initialized. Therefore at some empty single quotes
            let result = '';
            console.log(data.value);
            data.value.forEach((joke) => {
                result +=
                `<li><input type="checkbox" class='inputCheckbox' id='${joke.id}'/> User title :  ${joke.joke}</li>`;
                listOfJokes.innerHTML = result;
            });
            bindCheckbox();
        }).catch(function(err) {
            console.log(err);
        });
    }

    function clickedButton() {
        getJokesButton.setAttribute('disabled', 'disabled');
        getJokesButton.classList.add('opacity');
    }

    function bindCheckbox() {
        let inputCheckbox = document.querySelectorAll('input[type=checkbox]');
        let elems = document.getElementById('list-of-jokes').childNodes;
        let favoriteList = document.getElementById('favorites');
        let fav = JSON.parse(localStorage.getItem('favoList'))|| [];

        if(elems.length > 0) {  
            inputCheckbox.forEach(function(element, index) {
                inputCheckbox[index].addEventListener('change', function() {
                    let joke = this;
                    if(joke.checked && joke.parentNode.parentNode.id === 'list-of-jokes') { 
                       joke.checked = false;
                       favoriteList.appendChild(joke.parentNode);
                       addFavorite(joke.id, joke.parentNode.innerText, fav);
                    } 
                    if(joke.checked && joke.parentNode.parentNode.id === 'favorites') {
                       joke.checked = false;
                       removeFavorite(joke, index);
                    }
                });
            });
        }
        clickedButton();
    }

    function removeFavorite(favorite, index) {
        let favoriteCheckBox = favorite;
        let i = index;

        // convert iterable object to an array, otherwise splice method would give an error.
        let favoriteListItem = Array.from(favoriteCheckBox.parentNode); 
        favoriteListItem.splice(i, 1);
        document.getElementById('list-of-jokes').appendChild(favorite.parentNode);
        localStorage.setItem('favoList', JSON.stringify(favoriteListItem));
    }

    // store favorites in localStorage
    function addFavorite(jokeId, jokeText, fav) {
        let norrisJoke = {
            id: jokeId,
            joke: jokeText
        };
        let favorites = fav;

        for (let i = 0; i < favorites.length; i++) {
            if(favorites[i].id !== norrisJoke.id) {
                favorites.push(norrisJoke);
            }
        }
        // favorites[i].id !== norrisJoke.id

        // always get the object before the push method and pass it into stringify
        localStorage.setItem('favoList', JSON.stringify(favorites));
    }   

   // function which will randomly add one joke to favorite list every 5 seconds
   // function need a button which allows you to turn on and off this auto add function
})();

Answer 2

The problem is the for loop, the first time it's executed favorites will be an empty array so it's length will be 0, so it will never enter the loop

Something like this should work:

favorites = favorites.filter(joke => joke.id !== norrisJoke.id).concat(norrisJoke);

Answer 3

You are trying to run through an empty list here

for (let i = 0; i < favorites.length; i++) {
    if(favorites[i].id !== norrisJoke.id) {
        favorites.push(norrisJoke);
    }
}

This means that nothing will ever be pushed. You can reduce your list to an array of id , then check if the joke exists in the list.

const favIds = favorites.reduce((sum, element) => { 
        return sum.concat(element.id); 
    }, 
[]);

Now you can check if the joke doesn't exists in favorites

if(!favIds.includes(jokeId)){
    favorites.push(norrisJoke);
}