title: Printing object from Local Storage
body: <p>I have a an expenses form which saves data to the Browser local storage. I have abutton on the page below the form so that after you fill in in the form you can then click to print out the data in a nice format.</p>
  
  <p>I have to use the JSON data in the local storage due to the functionality of my app.</p>
  
  <p>I am using the js variable to grab the data from local storage:</p>
  
  <pre><code>var my_expenses = localStorage.getItem('my_expenses');
  </code></pre>
  
  <p>Here is the entry in my browser local storage, with the unminified value.</p>
  
  <p>Key:my_expenses
  Value:</p>
  
  <pre><code>{
      "income": {
          "1": {
              "name": "Pay (after tax)",
              "freq": "26",
              "value": "233"
          },
          "2": {
              "name": "Partners take home pay",
              "freq": "4",
              "value": "10"
          },
          "3": {
              "name": "Bonuses/overtime",
              "freq": "26",
              "value": "30"
          },
          "4": {
              "name": "Income from savings and investments",
              "freq": "1",
              "value": "50"
          },
          "5": {
              "name": "Child support received ",
              "freq": "12",
              "value": "40"
          }
      },
      "outgoings": {
          "1": {
              "name": "Electricity",
              "freq": "4",
              "value": "0"
          },
          "2": {
              "name": "Gas",
              "freq": "4",
              "value": "0"
          },
          "3": {
              "name": "Water",
              "freq": "4",
              "value": "0"
          },
          "4": {
              "name": "Internet",
              "freq": "4",
              "value": "0"
          },
          "5": {
              "name": "Telephone",
              "freq": "4",
              "value": "0"
          },
          "6": {
              "name": "Car Insurance",
              "freq": "1",
              "value": "0"
          }
      }
  }
  </code></pre>
  
  <p>According to Print.js you can print JSON data like so (including my variable with my local storage data):</p>
  
  <pre><code> &lt;button type="button" onclick="printJS({printable: my_expenses, properties: ['name', 'freq', 'value'], type: 'json'})"&gt;
  Print JSON Data
  </code></pre>
  
  <p></p>
  
  <p>For some reason I am getting an error in my console and I cant figure it out and no dialogue opens for printing.</p>
  
  <pre><code>Uncaught Error: Missing printable information.
  at init (print.min.js:1)
  at HTMLButtonElement.onclick ((index):156)
  </code></pre>
  
  <p>I think it may be the structure of my JSON in the local storage?. any help would be deeply appreciated.</p>
  
  <hr>
  
  <p>Tried Using JSON.parse() like so:</p>
  
  <pre><code>var my_expenses = JSON.parse(localStorage.getItem("my_expenses"));
  </code></pre>
  
  <p>before I added JSON parse. I was getting the wrror and this was the output of the local storage in the console.</p>
  
  <p><a href="https://i.stack.imgur.com/aMUnP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aMUnP.png" alt="before JSON parse"></a></p>
  
  <p>after I added it this was the output and the print button seemed to work:</p>
  
  <p><a href="https://i.stack.imgur.com/WLvnI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WLvnI.png" alt="with JSON parse"></a></p>
  
  <p>But the print dialogue has no data?</p>
  
  <p><a href="https://i.stack.imgur.com/pMS9N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pMS9N.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>How the object is created and the local storage functions:</p>
  
  <pre><code>//Set the default incomes and outgoings here
  var defaultsObj = {
      'income':{
          1:{name:"Pay (after tax)",freq:52,value:0},
          2:{name:"Partners take home pay",freq:4,value:0},
          3:{name:"Bonuses/overtime",freq:26,value:0},
          4:{name:"Income from savings and investments",freq:1,value:0},
          5:{name:"Child support received ",freq:12,value:0}
      },'outgoings':{
          1:{name:"Electricity",freq:4,value:0},
          2:{name:"Gas",freq:4,value:0},
          3:{name:"Water",freq:4,value:0},
          4:{name:"Internet",freq:4,value:0},
          5:{name:"Telephone",freq:4,value:0},
          6:{name:"Car Insurance",freq:1,value:0}
      }
  };  
  
  //Functions to store and retrieve objects from localstorage
  function ls_store(name,o){
      localStorage.setItem(name, JSON.stringify(o));          
  };
  function ls_read(name){
      return JSON.parse(localStorage.getItem(name));
  };  
  
  function set_defaults(){
      ls_store('my_expenses',defaultsObj);
      expensesObj = ls_read('my_expenses'); 
  }
  //If our localstroage items are empty let's store the defaults
  if(ls_read('my_expenses')==null){
      set_defaults();
  }
  </code></pre>