Printing object from Local Storage

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.

I have to use the JSON data in the local storage due to the functionality of my app.

I am using the js variable to grab the data from local storage:

var my_expenses = localStorage.getItem('my_expenses');

Here is the entry in my browser local storage, with the unminified value.

Key:my_expenses Value:

{
    "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"
        }
    }
}

According to Print.js you can print JSON data like so (including my variable with my local storage data):

 <button type="button" onclick="printJS({printable: my_expenses, properties: ['name', 'freq', 'value'], type: 'json'})">
Print JSON Data

For some reason I am getting an error in my console and I cant figure it out and no dialogue opens for printing.

Uncaught Error: Missing printable information.
at init (print.min.js:1)
at HTMLButtonElement.onclick ((index):156)

I think it may be the structure of my JSON in the local storage?. any help would be deeply appreciated.

---

Tried Using JSON.parse() like so:

var my_expenses = JSON.parse(localStorage.getItem("my_expenses"));

before I added JSON parse. I was getting the wrror and this was the output of the local storage in the console.

after I added it this was the output and the print button seemed to work:

But the print dialogue has no data?

---

How the object is created and the local storage functions:

//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();
}

You dont save an array and printjs wait for an array.

Try to save into two differents array, first, to see the result into your pdf.

If data is displayed for first array you must : call two times printjs, one for first array and another for second array OR combine theses two array into a single and maybe adding an attribut to disting if is incombe or outcome.