CODEWITHSUNDEEP
javascriptjsonstringparsing
andor kesselman
andor kesselman

Reputation: 1179

Updating JSON file in Javascript

On a program that I am working on, I send a literal variable to local strorage with JSON.stringify. The plan is I want to constantly update the local storage and add onto the existing local storage. I'm getting problems with the parsing aspect of the JSON file. My code for adding to storage is this:

function addtoStorage(key, data) {
    if (typeof(Storage) !== "undefined") {
    if (localStorage[key]) {
        console.log("Local Storage stuff" + localStorage[key]);
        var olddata = JSON.parse(localStorage[key]);
        var dataJSON = JSON.stringify(olddata + data);
        localStorage[key] = localStorage[key] + dataJSON;
    }
    else {
        var dataJSON = JSON.stringify(data);
        localStorage[key] = dataJSON;
    }
}
else {
    console.log("You don't have storage capabilities. Sorry. Next time improve your browser.");
}

} ;

And my output is this on console.log is:

Local Storage stuff{"asdf":"","tes":6,"type":"asdf","ast":1,"sd":"","ew":"","asdf":{"te":0,"wer":0},"asf":"","te":"","context":{"asdf":1,"total_hits":0,"asdf":1,"tew":0,"asdf":"","tes":"","date":"asfd-asdf-","asdf":0},"asdf":""}"[object Object][object Object]" main.js:487

Uncaught SyntaxError: Unexpected string

I'm fairly sure I understand what the problem is. I just can't seem to figure out how to fix it. It is obviously closing out the JSON object too soon, any recommendations???

Upvotes: 1

Views: 13945

Answers (2)

FabianCook
FabianCook

Reputation: 20587

Uncaught SyntaxError: Unexpected string is coming from JSON.parse, this is because it is no longer valid JSON (http://json.org/)

What you are doing is adding an object to an object, which turns out to be a string

enter image description here

Then when you go to stringify it, the entire thing will be taken is just a string the first time and the second time. So it will go through fine, then the third time when it tries to parse it, the function will fail because you have added a JSON object with a string.

If you are only storing JSON objects you can use jQuery's extend function (http://api.jquery.com/jQuery.extend/)

Or if you are storing more then just objects change it all to an array

This should cover everything

function addtoStorage(key, data) {
    if (typeof(Storage) !== "undefined") {
        if (localStorage.getItem(key)) {
            console.log("Local Storage stuff" + localStorage.getItem(key));
            var olddata = JSON.parse(localStorage.getItem(key));
            var newdata = null;
            if(olddata instanceof Array){
                olddata.push(data);
                newdata = olddata;
            }else if(data instanceof Array || !(data instanceof Object) || !(olddata instanceof Object)){
                newdata = [olddata, data];
            }else if(data instanceof Object && olddata instanceof Object){
                newdata = $.extend(olddata, data);
            }
            var dataJSON = JSON.stringify(newdata);
            localStorage.setItem(key, dataJSON);
        }
        else {
            var dataJSON = JSON.stringify(data);
            localStorage.setItem(key, dataJSON);
        }
    }
    else {
        console.log("You don't have storage capabilities. Sorry. Next time improve your browser.");
    }
}

Upvotes: 1

Alex W
Alex W

Reputation: 38253

I don't think you should be doing olddata + data since stringify is for parsing JavaScript objects to JSON and you can't just add two objects together.

You should try implementing an object merge function, like the one jQuery uses:

function merge( first, second ) {
                var len = +second.length,
                        j = 0,
                        i = first.length;

                for ( ; j < len; j++ ) {
                        first[ i++ ] = second[ j ];
                }

                first.length = i;

                return first;
        }

then just do 

var newdata = merge(olddata, data);
var dataJSON = JSON.stringify(newdata);

https://github.com/jquery/jquery/blob/master/src/core.js#L390

Upvotes: 3

Related Questions