How do I pass the objects retrieved from the localstorage into a DOM using innerHTML?

user_12456621 0
Viewed 95

I am trying to pass all the data saved in the localStorage into the DOM using innerHTML. However, showCollections() doesn't return all the data in the retrieved in the local storage after clicking on the submit button or after reloading the page. It only returns the last item in the collectionObj array.

Here is what I have tried so far: 

//get form values 
// create an object of the form values
//create an empty array
//append object of the form values to the empty array
//display array object values

showCollection();

var getButton = document.getElementById('clickIt');
var collectionTitle = document.getElementById("title");
var collectionDescription = document.getElementById('describe')


getButton.addEventListener('click', function(e){
    e.preventDefault()
    var collections = {
        title: collectionTitle.value,
        description: collectionDescription.value
    }

    let webCollections = localStorage.getItem('collectx');
    if(webCollections == null){
        var collectionObj = []
        alert('storage is empty')
    }
    else{
        collectionObj = JSON.parse(webCollections);
    }
    collectionObj.push(collections);
    localStorage.setItem("collectx", JSON.stringify(collectionObj));
    showCollection()
});


function showCollection(){
    let webCollections =  localStorage.getItem('collectx')
    if(webCollections == null){
        var collectionObj = []
        alert('storage is empty')
    }
    else{
        collectionObj = JSON.parse(webCollections);
    }
    let html= ''
    var demos = document.getElementById('demo');
    collectionObj.forEach(function(item, index){
        html = `<p> this is a description ${item.title} and description: ${item.description} </p>`
      })
      demos.innerHTML = html
   
    
}
    
    <form id="forms">
        <input id="title" type="text" placeholder="Collection name">
        <br>
        <br>
         <input id="describe" type="text" placeholder="Description">
        <button id="clickIt"> Submit </button>
      </form>
      
     <div id="demo">

     </div>

data-structures html javascript
2 Answers

Need to add a '+' sign,

html += `<p> this is a description ${item.title} and description: ${item.description} </p>

This will render all the content onto the webpage.

user_88350660

You might use insertAdjacentHtml to add each item, like:

showCollection();

function showCollection() {
  const
    demo = document.getElementById('demo'),
    collection = simulateRetrievingCollection();

  collection.forEach((item) => {
    const html = `<p>${item.title}: ${item.description}</p>`;
    demo.insertAdjacentHTML("beforeend", html);
  });
}

function simulateRetrievingCollection() {
  return [{
      title: "title1",
      description: "description1"
    },
    {
      title: "title2",
      description: "description2"
    },
    {
      title: "title3",
      description: "description3"
    }
  ];
}
#demo {
  width: 130px;
  margin: 15px;
  padding: 3px 15px;
  background-color: lightskyblue;
}
<div id="demo"></div>

user_82230700
Related