Javascript and JSON: Making Updates to Files

Question

Javascript and JSON: Making Updates to Files

Working on a program, I am faced with an issue while sending a literal variable to local storage using JSON.stringify. My goal is to continuously update the local storage and append to the existing data stored. The problem arises during the parsing of the JSON file. Here's the code snippet I've been using to add to the storage:

function addtoStorage(key, data) {
    if (typeof(Storage) !== "undefined") {
        if (localStorage[key]) {
            console.log("Local Storage data: " + 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("Unfortunately, your browser does not support storage capabilities. Please upgrade for better performance.");
    }
}

}

The output displayed through console.log is as follows:

Local Storage data{"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 believe I have identified the issue causing this error. However, I am struggling to find the solution to it. It seems like the JSON object is being closed prematurely, any suggestions on how I could rectify this problem???

javascript json string parsing

Answer 1

Answer №1

Instead of simply adding olddata + data, consider creating a custom object merge function to combine the two objects. The purpose of stringify is to convert JavaScript objects to JSON, so direct addition will not work.

You can try using a merge function similar to the one used in jQuery:

function mergeObjects(firstObj, secondObj) {
    var length = +secondObj.length,
        j = 0,
        i = firstObj.length;

    for (; j < length; j++) {
        firstObj[i++] = secondObj[j];
    }

    firstObj.length = i;

    return firstObj;
}

Then you can merge the objects and stringify the result like this:

var mergedData = mergeObjects(olddata, data);
var jsonData = JSON.stringify(mergedData);

For reference, check out jQuery's core.js file at https://github.com/jquery/jquery/blob/master/src/core.js#L390.

Answer 2

Instead of simply adding olddata + data, consider creating a custom object merge function to combine the two objects. The purpose of stringify is to convert JavaScript objects to JSON, so direct addition will not work.

You can try using a merge function similar to the one used in jQuery:

function mergeObjects(firstObj, secondObj) {
    var length = +secondObj.length,
        j = 0,
        i = firstObj.length;

    for (; j < length; j++) {
        firstObj[i++] = secondObj[j];
    }

    firstObj.length = i;

    return firstObj;
}

Then you can merge the objects and stringify the result like this:

var mergedData = mergeObjects(olddata, data);
var jsonData = JSON.stringify(mergedData);

For reference, check out jQuery's core.js file at https://github.com/jquery/jquery/blob/master/src/core.js#L390.

Answer 3

Answer №2

A syntax error that was not caught, caused by an unexpected string

, originates from the JSON.parse function when attempting to parse invalid JSON data (http://json.org/)

The issue arises from adding an object to another object, resulting in a string instead of valid JSON data

Subsequently, when trying to convert it using stringify, the entire structure gets treated as a single string on the initial and subsequent attempts. The process seems fine initially but fails during parsing at a later stage due to mixing a JSON object with a string.

If your aim is to store solely JSON objects, consider utilizing jQuery's extend feature (http://api.jquery.com/jQuery.extend/)

Alternatively, if you need to store various data types beyond objects, consider converting everything into an array format

This approach should address all related concerns

function addtoStorage(key, data) {
    if (typeof(Storage) !== "undefined") {
        if (localStorage.getItem(key)) {
            console.log("Local Storage data: " + 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("Your browser lacks storage capabilities. Consider upgrading for better performance.");
    }
}

Answer 4

A syntax error that was not caught, caused by an unexpected string

, originates from the JSON.parse function when attempting to parse invalid JSON data (http://json.org/)

The issue arises from adding an object to another object, resulting in a string instead of valid JSON data

Subsequently, when trying to convert it using stringify, the entire structure gets treated as a single string on the initial and subsequent attempts. The process seems fine initially but fails during parsing at a later stage due to mixing a JSON object with a string.

If your aim is to store solely JSON objects, consider utilizing jQuery's extend feature (http://api.jquery.com/jQuery.extend/)

Alternatively, if you need to store various data types beyond objects, consider converting everything into an array format

This approach should address all related concerns

function addtoStorage(key, data) {
    if (typeof(Storage) !== "undefined") {
        if (localStorage.getItem(key)) {
            console.log("Local Storage data: " + 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("Your browser lacks storage capabilities. Consider upgrading for better performance.");
    }
}

Javascript and JSON: Making Updates to Files

Answer №1

Answer №2

Similar questions

Enhance the appearance of TreeGrid nodes by customizing the icons according to the data within

Can you increase all px measurements in Notepad++ by a factor of X?

The offsetTop property of Angular's nativeElement always returns a value of 0

Refreshing JSON data in AngularJS: How to update only the changed content in an ivh-tree using REST API

Steps for interacting with a button of the <input> tag in Selenium using Python

Tips for sending an input file to an input file multiple times

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

Advantages of placing script src tags at the top of the body versus placing them at the bottom of the body

Send the ID of the checkbox to a PHP file using AJAX

What is the best way to eliminate extraneous object labels from the String of a JSONArray?

Received an error while attempting an AJAX GET request to a distinct server hosting a WebAPI

How can I take photos in bulk when I open the camera on Ionic 3?

Different JQuery countdowns in an iteration using Django

Extracting key-value pairs and unkeyed values from a JSON string during deserialization

The best method for quickly loading a webpage that is over 20MB in size

Guide on converting XML and JSON data in Swift 3

What is the best way to update the value of a preact signal from a different component?

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

Ensure that certain attributes are present in a setup file for the Atom IDE using an Ansible playbook

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer