Metoda tworząca obiekt XMLHttpRequest() i wczytująca plik data.JSON na stronę HTML

0

Czy może ktoś mi pomóc przy wrzuceniu danych z pliku JSON na stronę HTML

W skrypcie wyskakuje błąd przy var myObj = JSON.parse(data)

Całość znajduje się w załączniku.

To jest skrypt:

function loadJSONDoc() {
var xmlhttp =  new XMLHttpRequest();
xmlhttp.onreadystatechange =  function() {
if (this.readyState == 4 && this.status == 200)   {

jsonFunction(this.responseText);
}
};
xmlhttp.open("GET","data.JSON", true);
xmlhttp.send();
}

function jsonFunction(data) { 
var i;
var myObj = JSON.parse(data);
var dataTable= myObj.data;
data += "<h2>Tytuł książki: " + myObj.title + " </h2>";
data += "<h3>Autor: " + myObj.author + " </h3>";
data += "<h3>Data publikacji: " + myObj.publish_date + " </h3>";
data += "<h3>Kategoria: " + myObj.category + " </h3>";
 
document.getElementById("jsonContent").innerHTML  = data;
}

loadJSONDoc();

** tu jest plik ''data.JSON'':**

[
{	
	"id":"bk101",
	"title":"Sezon Burz",
	"description": {
		"author":"Sapkowski, Andrzej",
		"publish_date":"2012-07-06",
		"category":"Fantasy"
	}
},

{	
	"id":"bk102",
	"title":"Pan Tadeusz",
	"description": {
		"author":"Mickiewicz,Adam",
		"publish_date":"1834-06-28",
		"category":"Klasyka"
	}
},

{	
	"id":"bk103",
	"title":"Hobbit, czyli tam i z powrotem",
	"description": {
		"author":"Tolkien, John Ronald Reuel",
		"publish_date":"1937-09-21",
		"category":"Fantasy"
	}
},
]
2
 },
]

po co ten przecinek na końcu. A na przyszłość https://jsonlint.com

0

dalej coś ze skryptem nie tak musi być, bo pokazuje mi teraz coś takiego
http://imgur.com/a/WiYrh

1

Funkcja "jsonFunction()" nie jest kompletna, jeżeli chcesz osiągnąć efekt pokazany na https://imgur.com/a/WiYrh po lewej stronie. Brak jest tam iteracji. Poza tym takie informacje jak "author", "publish_date" oraz "category" zawarte sa w "description".
Mozna to zrobic w ten sposób:


	function jsonFunction(data) { 
	
		var books = JSON.parse(data);
		var content = "";
		
		for(var i = 0; i< books.length; i++) {
		
			content += "<h2>Tytul ksiazki: " + books[i].title + "</h2>";
			content += "<h3>Autor: " + books[i].description.author + "</h3>";
			content += "<h3>Data publikacji: " + books[i].description.publish_date + "</h3>";
			content += "<h3>Kategoria: " + books[i].description.category + "</h3>";

		document.getElementById("jsonContent").innerHTML  = content;
		}
	}

1 użytkowników online, w tym zalogowanych: 0, gości: 1