I have a couple functions that parse the external/internal JSON data and return it onto the local webpage using localStorage. Now I have gotten the external JSON data to display correctly, but have not gotten the JSON data submitted locally and get a JSON.parse: unexpected end of data error. The function that parses this data is retrieveData().
Here are examples of what I'm trying to do.
function saveData () { //This function take the data from the html inputs and put the values into local storage
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 () { //This function takes the radio input; be it checked or unchecked
var radio = document.forms[0];
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
Favorite = radio[i].value;
}
}
}
function getCheckbox () { //This function takes the value from recommend; either being yes or no
if ($("Y").checked) {
recommendValue = $("Y").value;
}
else {
recommendValue = $("N").value;
}
}
function retrieveData () { //this function will retrieve the data in local storage or from json.js if their is no default data
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);
//ImageGrab($("Select").value, Div);
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);
//convert local storage value back into an object using JSON
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 () { //this function reads in json.js with Ajax
var xmlRequest;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlRequest = new XMLHttpRequest();
}
else {
// code for IE6, IE5
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) { //this function gives me the ability to call an element easily. $("example")
var element = document.getElementById(x);
return element;
}
var DisplayRatings = $('DisplayLink');
DisplayRatings.addEventListener("click", retrieveData); //on-click display data
var SubmitRating = $('submit');
SubmitRating.addEventListener("click", saveData, true); //on-click save the data
Can anyone point me in the right direction? I've tried JSON.readyStatus === 4 and JSON.status === 200 before and to no avail (in an if statement).
My expected output of this is bring this up under the already made addGame.html page. As you can see it is suppose to make an unordered list then add ordered list items with the saved JSON data. Here is my html that take the inputs.
json.js file
{
"Game1": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "Call of Duty: Modern Warfare"],
"Rating": ["Rating:", "7"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "04-01-2010"],
"Notes": ["Notes:", "This is an FPS."]
},
"Game2": {
"Categories": ["Categories:", "Playstation 4"],
"Name": ["Name:", "Defiance"],
"Rating": ["Rating:", "3"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "04-07-2011"],
"Notes": ["Notes:", "Massive Multiplayer game."]
},
"Game3": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "Call of Duty: Black Ops II"],
"Rating": ["Rating:", "8"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "06-03-2011"],
"Notes": ["Notes:", "Great game."]
},
"Game4": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Dark Souls"],
"Rating": ["Rating:", "9"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-06-2011"],
"Notes": ["Notes:", "This game is extremely hard."]
},
"Game5": {
"Categories": ["Categories:", "Playstation 4"],
"Name": ["Name:", "Resident Evil 6"],
"Rating": ["Rating:", "2"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-01-2012"],
"Notes": ["Notes:", "This is not very great."]
},
"Game6": {
"Categories": ["Categories:", "Wii"],
"Name": ["Name:", "Wii Sports"],
"Rating": ["Rating:", "5"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-02-2012"],
"Notes": ["Notes:", "Virtual Sports."]
},
"Game7": {
"Categories": ["Categories:", "Mac"],
"Name": ["Name:", "Space Defenders"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-03-2012"],
"Notes": ["Notes:", "This is a good casual game."]
},
"Game8": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Spelunky"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-03-2013"],
"Notes": ["Notes:", "This is a randomly generated cave game."]
},
"Game9": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "Spelunky"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-03-2012"],
"Notes": ["Notes:", "This is the xbox live arcade version that came out first, but had many xbox exclusives."]
},
"Game10": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Prison Architect"],
"Rating": ["Rating:", "8"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-03-2012"],
"Notes": ["Notes:", "This is a prison simulation game."]
},
"Game11": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Don't Starve"],
"Rating": ["Rating:", "9"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-04-2012"],
"Notes": ["Notes:", "This is horror survival game."]
},
"Game12": {
"Categories": ["Categories:", "Wii"],
"Name": ["Name:", "Super Mario"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-04-2012"],
"Notes": ["Notes:", "Not as good as the original."]
},
"Game13": {
"Categories": ["Categories:", "Playstation 4"],
"Name": ["Name:", "uncharted 3"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-04-2012"],
"Notes": ["Notes:", "Hype didn't live up to expectations."]
},
"Game14": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Dota 2"],
"Rating": ["Rating:", "9"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-05-2012"],
"Notes": ["Notes:", "Great for pro players."]
},
"Game15": {
"Categories": ["Categories:", "Xbox360"],
"Name": ["Name:", "EA MMA"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-06-2011"],
"Notes": ["Notes:", "Best fighting game ever!"]
},
"Game16": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Papers, please"],
"Rating": ["Rating:", "6"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-07-2012"],
"Notes": ["Notes:", "This is a dystopian thiller."]
},
"Game17": {
"Categories": ["Categories:", "Mac"],
"Name": ["Name:", "Star Wars: Knights of the Old Republic"],
"Rating": ["Rating:", "8"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-07-2009"],
"Notes": ["Notes:", "This is a classic."]
},
"Game18": {
"Categories": ["Categories:", "PC"],
"Name": ["NRatingame:", "Counter Strike: Global Offensive"],
"Rating": ["Rating:", "7"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-16-2012"],
"Notes": ["Notes:", "One of the best FPS on the market."]
},
"Game19": {
"Categories": ["Categories:", "Wii"],
"Name": ["Name:", "007: Goldeneye"],
"Rating": ["Rating:", "4"],
"Recommend": ["Recommend:", "no"],
"Favorite": ["Favorite:", "no"],
"Date": ["Date:", "08-022-2012"],
"Notes": ["Notes:", "Controls are not very accesible."]
},
"Game20": {
"Categories": ["Categories:", "PC"],
"Name": ["Name:", "Super Meat Boy"],
"Rating": ["Rating:", "10"],
"Recommend": ["Recommend:", "yes"],
"Favorite": ["Favorite:", "yes"],
"Date": ["Date:", "08-01-2012"],
"Notes": ["Notes:", "One of my favorite platformers."]
}
}
addGame.html
<!DOCTYPE HTML>
<html>
<div id="headAddGame">
<head>
<meta charset="UTF-8">
<meta keyword="Ratings, list, Gaming">
<meta description="A form that will create a specific review for each game.">
<meta name="ROBOTS" content="INDEX, FOLLOW">
<meta name="viewport" content="user-scalable=no, width=device-width">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="json.js"/></script>
<div id="titleAddGame">
<title>
Add A Game
</title>
</div>
</head>
</div>
<div="bodyAddGame">
<body class="bodystyle">
<fieldset ID="field">
<legend class="bodyLegend">
Add Game
</legend>
<form action="#" method="post" id="form">
<h1 class="gameh1">
Select A Category:
</h1>
<select name="Category dropdown list" id="select">
<option value="Select One">Select One!</option>
<option value="Xbox360">Xbox360</option>
<option value="Playstation 4">Playstation 4</option>
<option value="PC">PC</option>
<option value="Mac">Mac</option>
<option value="Wii">Wii</option>
</select>
<h1 class="hone">
Game Information:
</h1>
<h2 class="htwo">
Name:
</h2>
<input type="text" name="Name" id="Name">
<h2 class="htwo">
Rating (from one to ten, ten being the highest, one being the lowest):
</h2>
<input type="range" name="rating" min="1" max="10" id="rating">
<h2 class="htwo">
Would you recommend?:
</h2>
<label for="Y">Yes</label>
<input type="checkbox" name="recommend" id="Y" value="Yes"><br>
<label for="N">No</label>
<input type="checkbox" name="recommend" id="N" value="No"><br>
<br>
<label for="Fav">
Save as a Favorite?
</label>
<br>
<input type="radio" name="Favorite" id="Fav" value="Yes">
<br>
<h2 class="htwo">
Date of review:
</h2>
<input type="date" name="date" id="date">
<h2 class="htwo">
Notes:
</h2>
<textarea rows="4" cols="50" id="notes">
</textarea>
<input type="hidden" id="Dev" value="mobileDev">
<br>
<br>
<input type="submit" value="submit" id="submit">
<br>
</form>
</fieldset>
</body>
</div>
<div id="footAddGame">
<footer>
<a href="#" ID="Clear">
clear stored data
</a>
<a href="#" ID="DisplayLink">
display data
</a>
<a href="addgame.html" id="Addgame" style="display:none;">
Add New Item
</a>
<script type="text/javascript" src="main.js"/></script>
</footer>
</div>
the resulting output when calling the retrieveData() function should add the example below to the page.
Similar to this:
- Category
- name
- rating
- recommend
- favorite
- notes
Yet, my resulting outcome comes out like this:
-
*
*
*
*
*
I'm just using JavaScript, Ajax, HTML, and CSS. On the problem it just deals with JavaScript and HTML (saving JSON data from the HTML to then display it on addGame.html).
EDIT: Also tried JSON.stringify() when reading in the values from the submitted html form. Same error occured.
