Save and retrieve js array to local json file

Question

This is for a school project, any help would be very much appreciated.

Code executed in a browser (Chrome) populates the below array.

I need to figure out how to store/update the array in a local file.

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

I understand in principle that I need to stringify the array into JSON data then write it to a file.

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

This is as far as I have gotten.

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 reference this is all of the script:

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

$(document).ready(function() {
  $('.warning').hide();
  $("#addItemForm").removeClass("has-warning");
  populateList();
});

function populateList() {
  var output = "";
  for (var i = 0; i < listDataObject.reminderListArray.length; i++) {
    output += '<li class="list-group-item" id="' + i + '">';
    if (listDataObject.reminderListArray[i].checkbox == false) {
      output += '<input type="checkbox" id="checkbox">';
    } else {
      output += '<input type="checkbox" id="checkbox" checked>';
    }
    if (listDataObject.reminderListArray[i].star == false) {
      output += '<i class="fa fa-star-o mx-1" aria-hidden="true"></i>';
    } else {
      output += '<i class="fa fa-star mx-1" aria-hidden="true"></i>';
    }
    output += '<button type="button" class="deleteBtn btn btn-secondary btn-sm float-xs-right">X</button>';
    output += listDataObject.reminderListArray[i].title;
    output += '</li>';
  }
  $("#mainList").append(output);
}

function deleteFromList(itemindex) {
  listDataObject.reminderListArray.splice(itemindex, 1);
  $("#mainList").empty();
  populateList();
}

$(document).on("click", '.deleteBtn', function() {
  deleteFromList($(this).parent().attr("id"));
});

$('.add').click(function() {
  var titleVal = $('#addItem').val();
  if (titleVal == "") {
    $('.warning').show();
    $("#addItemForm").addClass("has-warning");
  } else {
    $('.warning').hide();
    $("#addItemForm").removeClass("has-warning");
    $('#addItem').val("");
    listDataObject.reminderListArray.push({
      title: titleVal,
      star: false,
      checkbox: false
    });
    $("#mainList").empty();
    populateList();
  }
});

$(document).on("click", '.fa-star-o', function() {
  $(this).removeClass("fa-star-o");
  $(this).addClass("fa-star");
  listDataObject.reminderListArray[$(this).parent().attr("id")].star = true;
});

$(document).on("click", '.fa-star', function() {
  $(this).removeClass("fa-star");
  $(this).addClass("fa-star-o");
  listDataObject.reminderListArray[$(this).parent().attr("id")].star = false;
});

$(document).on("click", '#checkbox', function() {
  if ($(this).is(':checked')) {
    listDataObject.reminderListArray[$(this).parent().attr("id")].checkbox = true;
  } else {
    listDataObject.reminderListArray[$(this).parent().attr("id")].checkbox = false;
  }
});

Answer 1

You can create a Storage object in the current local Storage space using window.LocalStorage using getItem and setItem methods. Also don't stringify listDataObjects, don't enclose remainderListArray within ListDataObjects at all since it's an array of objects which can be parsed as JSON and retrieved into an array from local storage. So get rid of listDataObjects. See if this helps.

    var dataObjects = [];

    for(var i = 0;i < remainderListArray.length; i++) {
        dataObjects.push(remainderListArray[i]);
    }
    // Convert to a string and save in local storage
    localStorage.setItem('dataObjects', JSON.stringify(dataObjects));

For adding new Object

     // Get back in JSON format from localStorage
     var dataObjects = JSON.parse(localStorage.getItem('dataObjects'));
     // Add dataObject to array
     dataObjects.push(newDataObject);
     // Re-set back to localStorage
     localStorage.setItem('dataObjects', JSON.stringify(dataObjects));