Encountering a syntax error when trying to parse a local storage object?

Question

Encountering a syntax error when trying to parse a local storage object?

I've been exploring ways to store random numbers generated by Math.random. I've come up with a solution where I save the numbers in an array, which is then stored in localStorage. My goal is to append each new array of numbers whenever Math.random is used. To see the code I attempted to write, you can check it out here.

var nums = [];
for (var i = 0; i < 5; i++) {
    var num = Math.floor(Math.random() * 50);
    nums.push(" " + num);
}
console.log(nums);

function appendToStorage(name, data) {
    var old = localStorage.getItem(name);
    if (old === null) old = "";
    localStorage.setItem(name, old + JSON.stringify(data));
}

if (localStorage.num) {
    appendToStorage('num', nums);
} else {
    localStorage.setItem("num", JSON.stringify(nums));
}
var nums2 = localStorage.getItem("num");
console.log(nums2);
document.getElementById("test").innerHTML = JSON.parse(nums2);

Unfortunately, this setup doesn't seem to be functioning correctly. The console shows an error message saying

Uncaught SyntaxError: Unexpected token [

. This issue seems to be resolved if I remove the JSON.parse from the getElementById. However, I prefer to keep it parsed so that the numbers are displayed more clearly. Any suggestions on how I can resolve this?

javascript arrays json local-storage

Answer 1

Answer №1

If you concatenate a valid JSON string with another valid JSON string, the result will not be a valid JSON string. For instance:

var myJSON = '{"thing": "data"}';  // valid
myJSON = myJSON + myJSON; // myJSON now becomes '{"thing": "data"}{"thing": "data"}', which is not valid

To ensure accuracy, you must parse the retrieved JSON data, make the necessary updates, and then stringify it again before saving it in localStorage.

function appendToStorage(name, data) {
    var old = localStorage.getItem(name);
    if (old === null) old = "[]";
    var newData = JSON.parse(old);
    newData.push(data);
    localStorage.setItem(name, JSON.stringify(newData));
}

Keep in mind that parsing the data will return an array, causing issues when setting the innerHTML. You'll need to convert the array into a text format first (credit goes to jibsales for this insight).

Answer 2

If you concatenate a valid JSON string with another valid JSON string, the result will not be a valid JSON string. For instance:

var myJSON = '{"thing": "data"}';  // valid
myJSON = myJSON + myJSON; // myJSON now becomes '{"thing": "data"}{"thing": "data"}', which is not valid

To ensure accuracy, you must parse the retrieved JSON data, make the necessary updates, and then stringify it again before saving it in localStorage.

function appendToStorage(name, data) {
    var old = localStorage.getItem(name);
    if (old === null) old = "[]";
    var newData = JSON.parse(old);
    newData.push(data);
    localStorage.setItem(name, JSON.stringify(newData));
}

Keep in mind that parsing the data will return an array, causing issues when setting the innerHTML. You'll need to convert the array into a text format first (credit goes to jibsales for this insight).

Answer 3

Answer №2

To assign a string as input to Element.innerHTML, avoid using an Array. Consider utilizing JSON.parse(nums).join("");

Implementing this technique enables you to exclude the initial white space in your loop and include it at the beginning of the Array.join method. For separate lines for each number, specify "\n".

Answer 4

To assign a string as input to Element.innerHTML, avoid using an Array. Consider utilizing JSON.parse(nums).join("");

Implementing this technique enables you to exclude the initial white space in your loop and include it at the beginning of the Array.join method. For separate lines for each number, specify "\n".

Encountering a syntax error when trying to parse a local storage object?

Answer №1

Answer №2

Similar questions

To achieve proper display of multiple boxes, it is essential for each box to be

Using Ajax to preview images results in displaying a broken image icon

Using React hook form to create a Field Array within a Dialog component in Material UI

Warning: Attempting to access a property of an invalid object in

The absence of a backslash in the JSON string is noticed upon uploading it to the database

Enhancing Json_Encode output with extra arrays

What steps should I follow to generate a JSON object and apply it to refresh an ng-repeat?

Troubleshooting Vue.js: Why is .bind(this) not behaving as anticipated?

Implementing Vue modal within a Laravel 5.2 foreach loop

Creating a sticky header for a MatTable in Angular with horizontal scrolling

How to utilize "json_encode" function for accessing array elements

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

Using Python 3.6 to extract data from a JSON response containing nested dictionaries

Navigating a JSON array using the Handlebars template engine

Using react-big-calendar exclusively for the month view

React: executing function before fetch completes

I am facing website crashes when using the FindOneAndUpdate method in Node.js with MongoDB due to events.js issue

The array is failing to pass through ajax requests

What is the process of serializing a list in Python?

Using Django to load a template and incorporate a loading spinner to enhance user experience during data retrieval