Storing and accessing JavaScript arrays in a local JSON file

Question

Storing and accessing JavaScript arrays in a local JSON file

I am working on a school project and any assistance would be greatly appreciated.

Upon execution in a browser like Chrome, the array below gets populated with data.

I am trying to determine how to store or update this array in a local file.

var listDataObject = {
  reminderListArray: [{
      title: "Sample one",
      star: true,
      checkbox: true
    },
    {
      title: "Sample two",
      star: false,
      checkbox: false
    }
  ]
};

In theory, I know that I need to convert the array into JSON format and then save it to a file.

I have also read about parsing the JSON data when retrieving it.

However, this is as far as I have progressed.

saveText(JSON.stringify(listDataObject), "filename.json");

function saveText(text, filename) {
  var a = document.createElement('a');
  a.setAttribute('href', 'data:text/plain;charset=utf-u,' + encodeURIComponent(text));
  a.setAttribute('download', filename);
  a.click();
}

For your reference, here is the complete script:

...

javascript arrays json

Answer 1

Answer №1

To utilize the current local Storage space, you can create a Storage object by using window.LocalStorage along with the getItem and setItem methods. When dealing with an array of objects like remainderListArray, there's no need to stringify listDataObjects or enclose remainderListArray within ListDataObjects since it can be parsed as JSON and retrieved into an array directly from local storage. Therefore, removing listDataObjects in this context would be beneficial.

    var dataObjects = [];

    for(var i = 0; i < remainderListArray.length; i++) {
        dataObjects.push(remainderListArray[i]);
    }

    // Convert the dataObjects array to a string and store it in local storage
    localStorage.setItem('dataObjects', JSON.stringify(dataObjects));

When adding a new object:

     // Retrieve the stored dataObjects array in JSON format from localStorage
     var dataObjects = JSON.parse(localStorage.getItem('dataObjects'));
     
     // Add the newDataObject to the dataObjects array
     dataObjects.push(newDataObject);
     
     // Update the dataObjects array in localStorage
     localStorage.setItem('dataObjects', JSON.stringify(dataObjects));

Answer 2

To utilize the current local Storage space, you can create a Storage object by using window.LocalStorage along with the getItem and setItem methods. When dealing with an array of objects like remainderListArray, there's no need to stringify listDataObjects or enclose remainderListArray within ListDataObjects since it can be parsed as JSON and retrieved into an array directly from local storage. Therefore, removing listDataObjects in this context would be beneficial.

    var dataObjects = [];

    for(var i = 0; i < remainderListArray.length; i++) {
        dataObjects.push(remainderListArray[i]);
    }

    // Convert the dataObjects array to a string and store it in local storage
    localStorage.setItem('dataObjects', JSON.stringify(dataObjects));

When adding a new object:

     // Retrieve the stored dataObjects array in JSON format from localStorage
     var dataObjects = JSON.parse(localStorage.getItem('dataObjects'));
     
     // Add the newDataObject to the dataObjects array
     dataObjects.push(newDataObject);
     
     // Update the dataObjects array in localStorage
     localStorage.setItem('dataObjects', JSON.stringify(dataObjects));

Storing and accessing JavaScript arrays in a local JSON file

Answer №1

Similar questions

Issue with JSONP request in jQuery/AJAX

Is it possible to trigger an event just once?

The Autocomplete component from MUI is alerting me to provide a unique key for every child element being passed

The type 'number' cannot be assigned to the type 'Element'

Is the accuracy of the in-situ convolution filter guaranteed?

Generate a Calendar Table using JavaScript in the Document Object Model (DOM

Manipulating the state of the <audio> HTML5 element with Javascript

Tips for swapping out a div tag with another div tag in the same spot without needing to redirect to a different page by utilizing bootstrap

Multer's re.file function is returning an undefined value

Display additional inputs using the PHP Foreach Loop depending on the selection made

Using nodeJS to showcase content on a web page

Generating PDF files from HTML documents using Angular

Error on Network: 400 BAD REQUEST in Ionic framework

Executing JavaScript code from an external HTML file

Storing external API requests in create-react-app's service worker for faster retrieval

The issue of the Angular 4 double click event not functioning properly on mobile devices

Comparison of Grant and Passport.js: Which One to Choose?

Issues with data-ng-click functionality in AngularJS combined with UI Bootstrap and MVC Frontend

Mongoose - run a function on a designated date within the document

Looking to create dynamic pages on NextJS without relying on fixed paths?