Printing object from Local Storage

Question

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

tried with JSON.parse(localStorage.getItem("my_expenses")); ? — Chris, May 24 '18 at 19:29
Hey chris, Tried it buddy will update main answer with the output, it worked a bit but not completley. — Brian Revie, May 24 '18 at 19:34
and did you tried to store into local storage with : localStorage.setItem('my_expenses', JSON.stringify(my_expenses_object)); ? — Chris, May 24 '18 at 19:37
how did you store my_expenses_object ? is it an array ? printJS waiting for an array but your localStorage seems to have a JSON object — Chris, May 24 '18 at 19:48
yes, but this "object" is an object or an array , can you display us code for show us how you construc this object ? — Chris, May 24 '18 at 19:56

Chris · Accepted Answer · 2018-05-24T20:43:27.260

2

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.

edited May 24 '18 at 20:43

answered May 24 '18 at 20:22

Chris

234
3
16

Hey Chris I just want to thank you for taking the time to assist me, I really appreciate it. – Brian Revie May 25 '18 at 16:51

Printing object from Local Storage

1 Answers1