title: Working with javascript json strings and arrays, and localstorage
body: <p>I have some JavaScript code that can look like this :</p>
  
  <pre><code> var cards = [
      {
      "title": "Rugbrød, fuldkorn",
      "titleDetails": "1/2 Skive (fuldkorn)",
      "unitAmount": "25",
      "unit": "g",
      "carbon": "10",
      "energy": "215",
      "fibreDietary": "2",
      "sugar": "0",
      "fat": "0.3",
      "fatSaturated": "0.1",
      "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
      "category": "Brød",
      "isHealthy": "YES",
      "isTempAddedCarb": "NO",
      "imageId": "98862",
      "imageFileName": "kulhydratkort_lille_page_001.jpg",
      "umbracoId": "98860"
      }
      ]
  </code></pre>
  
  <p>And then i have some code which is meant to add another "part" to the array named "card", which means that the array "cards" should become :</p>
  
  <pre><code> var appStatus = [
      {
      "title": "Rugbrød, fuldkorn",
      "titleDetails": "1/2 Skive (fuldkorn)",
      "unitAmount": "25",
      "unit": "g",
      "carbon": "10",
      "energy": "215",
      "fibreDietary": "2",
      "sugar": "0",
      "fat": "0.3",
      "fatSaturated": "0.1",
      "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
      "category": "Brød",
      "isHealthy": "YES",
      "isTempAddedCarb": "NO",
      "imageId": "98862",
      "imageFileName": "kulhydratkort_lille_page_001.jpg",
      "umbracoId": "98860"
      },
  // the thing under this text is what i call the second "class"
      {
      "title": "Rugbrød, fuldkorn",
      "titleDetails": "1/2 Skive (fuldkorn)",
      "unitAmount": "25",
      "unit": "g",
      "carbon": "10",
      "energy": "215",
      "fibreDietary": "2",
      "sugar": "0",
      "fat": "0.3",
      "fatSaturated": "0.1",
      "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
      "category": "Brød",
      "isHealthy": "YES",
      "isTempAddedCarb": "NO",
      "imageId": "98862",
      "imageFileName": "kulhydratkort_lille_page_001.jpg",
      "umbracoId": "98860"
      }
      ]
  </code></pre>
  
  <p>This is the function i´m currently using to dynamically create the second "claas" of the array.</p>
  
  <pre><code>    function addcard(){
      const newcard = {
  // this gets the information and puts it into a json string
      "title": document.getElementById("card_name").value,
      "unit": document.getElementById("card_unit").value,
      "carbon": document.getElementById("card_kh").value,
      "energy": document.getElementById("card_energi").value,
      "fibreDietary": document.getElementById("card_kostfibre").value,
      "sugar": document.getElementById("card_sukker").value,
      "fat": document.getElementById("card_fedt").value,
      "fatSaturated": document.getElementById("card_mfedt").value
          }
  //this creates a localstorage item with the name of the "class", and the contents of the json string
          localStorage.setItem(document.getElementById("card_name").value, JSON.stringify(newcard))
  //This adds the localstorage key to a list of "cards", where one "card" is a "class" from the json string
          localStorage.setItem("cards", localStorage.getItem("cards") + "\n" + document.getElementById("card_name").value)
      }
  </code></pre>
  
  <p>I want to use this to make the user able to input values into the inputs, then convert all of that into a json or a array, then save that into localstorage. Amd then add the localstorage key to another localstorage.</p>
  
  <p>Then when the user logs back in i want it so load the json string into a js array so it will become something like this</p>
  
  <pre><code>var appStatus = [
  {
  "title": "Rugbrød, fuldkorn",
  "titleDetails": "1/2 Skive (fuldkorn)",
  "unitAmount": "25",
  "unit": "g",
  "carbon": "10",
  "energy": "215",
  "fibreDietary": "2",
  "sugar": "0",
  "fat": "0.3",
  "fatSaturated": "0.1",
  "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
  "category": "Brød",
  "isHealthy": "YES",
  "isTempAddedCarb": "NO",
  "imageId": "98862",
  "imageFileName": "kulhydratkort_lille_page_001.jpg",
  "umbracoId": "98860"
  },
  
   //the thing under this text is what i call the second "class"
  {
  "title": "Rugbrød, fuldkorn",
  "titleDetails": "1/2 Skive (fuldkorn)",
  "unitAmount": "25",
  "unit": "g",
  "carbon": "10",
  "energy": "215",
  "fibreDietary": "2",
  "sugar": "0",
  "fat": "0.3",
  "fatSaturated": "0.1",
  "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
  "category": "Brød",
  "isHealthy": "YES",
  "isTempAddedCarb": "NO",
  "imageId": "98862",
  "imageFileName": "kulhydratkort_lille_page_001.jpg",
  "umbracoId": "98860"
  }
  ]
  </code></pre>
  
  <p>When i get the JavaScript array, i need to use it in a loop like this :</p>
  
  <pre><code>function renderCards(){
  for(var i = 0; i &lt; cards.length; i++){
  var ul = document.getElementById("cardslist");
  var li = document.createElement('li');
  li.id = cards[i].title
  li.innerText = cards[i].title
  var newa = document.createElement("a")
  newa.innerText = cards[i].title;
  newa.href = "javascript:clickCard(" + i + ")"
  li.appendChild(newa)
  ul.appendChild(li);
  }
  }
  </code></pre>
  
  <p>This is used to take the elements from the array, and put them into a ul element</p>