I have been working on a few functions that are responsible for parsing JSON data, both external and internal, and displaying it on a local webpage using the localStorage feature. While I have successfully displayed the external JSON data, I am running into an issue when trying to submit and parse locally stored JSON data, resulting in a
JSON.parse: unexpected end of dataretrieveData().
Here is an overview of what I am attempting to achieve.
function saveData() {
getRadio();
getCheckbox();
localStorage.setItem("Categories", $("select").value);
localStorage.setItem("Name", $("Name").value);
localStorage.setItem("Rating", $("rating").value);
localStorage.setItem("Recommend", recommendValue);
localStorage.setItem("Favorite", Favorite);
localStorage.setItem("Date", $("date").value);
localStorage.setItem("Notes", $("notes").value);
alert("Resource Saved!");
}
function getRadio() {
var radio = document.forms[0];
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
Favorite = radio[i].value;
}
}
}
function getCheckbox() {
if ($("Y").checked) {
recommendValue = $("Y").value;
}
else {
recommendValue = $("N").value;
}
}
function retrieveData() {
toggle("on");
if (localStorage.length === 0) {
alert("No data in localStorage. Adding default data.");
fillData();
}
var Makediv = document.createElement('div');
Makediv.setAttribute("id", "games");
var list = document.createElement('ul');
Makediv.appendChild(list);
document.body.appendChild(Makediv);
for (var i = 0; i < localStorage.length; i++) {
var mli = document.createElement('li');
list.appendChild(mli);
var keyVal = localStorage.key(i);
var value = localStorage.getItem(keyVal);
var objct = JSON.parse(value);
var makesul = document.createElement('ul');
mli.appendChild(makesul);
for (var q in objct) {
var msl = document.createElement('li');
makesul.appendChild(msl);
var subText = objct[q][0] + " " + objct[q][1];
msl.innerHTML = subText;
}
}
}
function fillData() {
var xmlRequest;
if (window.XMLHttpRequest) {
xmlRequest = new XMLHttpRequest();
}
else {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
var text = xmlRequest.responseText;
var json = JSON.parse(text);
}
xmlRequest.open("GET", "json.js?_dc" + Math.random(), false);
xmlRequest.send();
for (var i in json) {
var ID = Math.floor(Math.random() * 100000001);
localStorage.setItem(ID, JSON.stringify(json[i]));
}
}
function $(x) {
var element = document.getElementById(x);
return element;
}
var DisplayRatings = $('DisplayLink');
DisplayRatings.addEventListener("click", retrieveData);
var SubmitRating = $('submit');
SubmitRating.addEventListener("click", saveData, true);
Can anyone offer some guidance on this issue? I have tried using JSON.readyStatus === 4 and JSON.status === 200 without success, within an if statement.
My goal is to have this functionality integrated into the existing addGame.html page. The expected outcome is to display the data in an unordered list format with the saved JSON data. Below is a snippet of the JSON data stored in the json.js file.
{
// JSON data here
}
The addGame.html file contains the form structure to input data for the JSON object.
Upon calling the retrieveData() function, the expected output should resemble the following structure:
- Category
- Name
- Rating
- Recommend
- Favorite
- Notes
However, the actual output I am experiencing looks like this:
-
*
*
*
*
*
I am solely using JavaScript, Ajax, HTML, and CSS for this project. The issue seems to be specifically related to handling JavaScript and HTML to save JSON data from the form and display it on the addGame.html page.
UPDATE: I have also attempted using JSON.stringify() when reading values from the submitted form, but the same error persists.