CODEWITHSUNDEEP
javascriptlocal-storage
JPabs
JPabs

Reputation: 17

How to get stored object array from local storage and display in the browser using java script

I want to create a journal app that users can give titles and contents. this title and content save in the local storage as and later both need to display on the browser. I successfully did the storing part. however, when I trying to display title and content, it displays as undefined.

//html

<body onload="displayTodo()">
    <input type="text" name="" id="textTitle">
    <input type="text" name="" id="textContent">
    <button type="submit" id="add">add</button>

    <div id="display"></div>

    <script src="main.js"></script>
</body>
</html>


//java script
let textTitle = document.getElementById("textTitle");
let textContent = document.getElementById("textContent");
let display = document.getElementById('display');

document.getElementById('add').addEventListener('click', addToStorage);

function addToStorage() {
    let textTitleValue = textTitle.value;
    let textContentValue = textContent.value;
    // insert user inpurt into an abject array
    let notes = [{
        "title": textTitleValue,
        "content": textContentValue
    }]
    // get the exsisting jason data from the local storage and convert to string values
    let getNotes = JSON.parse(localStorage.getItem("diary")) || [];
    // push the user input into the converted object array
    getNotes.push(notes);

    
    // convert string to json data
    let notes_s = JSON.stringify(getNotes);
    // send the json data in to localstorage
    localStorage.setItem("diary", notes_s);
    console.log(localStorage);

}

function displayTodo() {
    let notesObject = JSON.parse(localStorage.getItem("diary"));
    let newNotesObject = [];
newNotesObject.push(notesObject);

// console.log(newObjectFor);

    for (let i = 0; i < newNotesObject.length; i++) {
        console.log(newNotesObject[i]);

        let item = `
<li>
        <p class="form-control" id="exampleFormControlInput1">${newNotesObject[i].title}</p>
        <p class="form-control" id="exampleFormControlInput1">${newNotesObject[i].content}</p>
</li>

`
display.innerHTML += item;

    }
}

Upvotes: 0

Views: 529

Answers (2)

AnshulJS
AnshulJS

Reputation: 328

  1. On page load displayTodo function is called and this function is taking title and content from local storage named as "diary" but at this point, there is no such storage named as "diary". So it will print undefined on page load

  2. When button click addToStorage function triggered. This function is taking data from a local-storage named "diary". But there is no data here till now in diary storage. So it will set undefined in localstorage.

Upvotes: 0

Swaraj Gandhi
Swaraj Gandhi

Reputation: 714

You are creating new array each time you are adding any new object. Updated JS:

let textTitle = document.getElementById("textTitle");
let textContent = document.getElementById("textContent");
let display = document.getElementById('display');

document.getElementById('add').addEventListener('click', addToStorage);

function addToStorage() {
    let textTitleValue = textTitle.value;
    let textContentValue = textContent.value;
    // insert user inpurt into an abject array
    let notes = {
        "title": textTitleValue,
        "content": textContentValue
    };
    // get the exsisting jason data from the local storage and convert to string values
    let getNotes = JSON.parse(localStorage.getItem("diary")) || [];
    // push the user input into the converted object array
    getNotes.push(notes);

    
    // convert string to json data
    let notes_s = JSON.stringify(getNotes);
    // send the json data in to localstorage
    localStorage.setItem("diary", notes_s);
    console.log(localStorage.getItem("diary"));

}

function displayTodo() {
    let notesObject = JSON.parse(localStorage.getItem("diary"));

    for (let i = 0; i < notesObject.length; i++) {
        console.log(notesObject);

        let item = `
<li>
        <p class="form-control" id="exampleFormControlInput1">${notesObject[i].title}</p>
        <p class="form-control" id="exampleFormControlInput1">${notesObject[i].content}</p>
</li>

`
display.innerHTML += item;

    }
}

Upvotes: 2

Related Questions