Unable to access array's items

JavaScript
1

Hi, I am creating a todo list web app. The app takes the input from the user, stores it in an array(“mainList”) , this “mainList” is also stored in the localstorage. Now what I am trying to do is fetch this “mainList” from the localstorage and display all its values in a div(“listItems”) by creating a child div, an input and a label. I am able create the elements but the line
lab.textcontent=mainList[i]
It is accessing all the value in just one label instead of accessing one value for one label. The code is down below

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="sass/style.css">
    <!-- <script src="js/main.js" type="module"></script> -->
    <title>To Do List</title>
</head>

<body>
    <main>
        <section class="newItemEntry">
            <form id="itemEntryForm">
                <label for="newItem">Enter a new to do item</label>
                <input id="newItem" type="text" autocomplete="off" placeholder="Add item" tabindex="0">
                <button id="addItem" class="button" title="Add new item" aria-label="Add new item to list" tabindex="0">+</button>
            </form>
        </section>
        <section class="listContainer">
            <div class="listTitle">
                <h1 tabindex="0">To Do List</h1>
                <button id="clearItem" class="button" title="Clear The List" aria-label="Remove all items from the list" tabindex="0">Clear</button>
            </div>
            <hr>
            <div id="listItems">
                <!-- <div class="item">
                    <input type="checkbox" id="1" tabindex="0"><label for="1">eat</label>
                </div>
                <div class="item">
                    <input type="checkbox" id="2" tabindex="0"><label for="2">code</label>
                </div> -->
            </div>
            <p class="confirmation" id="confirmation" aria-live="assertive"></p>
        </section>
    </main>
    <script>
        //to fetch the list

        var mainList = [];
        mainList.push(localStorage.getItem("data"));

        //  To launch the app

        document.addEventListener("readystatechange", (event) => {
            if (event.target.readyState === "complete") {
                console.log("loaded");
                initialise();
            }
        });

        function initialise() {
            document.getElementById('addItem').addEventListener("click", (event) => {
                event.preventDefault();
                const test = getEntry();
                mainList.push(test);
                localStorage.setItem("data", mainList);
                document.getElementById("newItem").value = '';
            });

            loadList();
            console.log("init working");
        }

        //  To  create the list
        function loadList() {
            console.log("load working");
            for (let i = 0; i < mainList.length; i++) {
                console.log("loop working", i, mainList.length, mainList);
                const div = document.createElement("div");
                div.className = "item";
                const inp = document.createElement("input");
                inp.type = "checkbox";
                inp.tabIndex = "0";
                inp.id = ++i;
                const lab = document.createElement("label");
                lab.htmlFor = inp.id;
                i--;
                lab.textContent = mainList[i];
                document.getElementById("listItems").appendChild(div);
                div.appendChild(inp);
                div.appendChild(lab);
            };
        }

        function getEntry() {
            return document.getElementById('newItem').value;
        }

    </script>
</body>

</html>
2

localStorage stores values as strings.
If you want to save objects/arrays you should JSON.stringify value before saving and JSON.parse it after retrieving from localStorage.

1 Like
3

Ya, that worked. Thought JSON will come later in the learning. Thanks.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.