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

Odpowiedz Nowy wątek
2017-05-25 21:29
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"
    }
},
]
  • 3.jpg (0,07 MB) - ściągnięć: 41
  • 2.jpg (0,13 MB) - ściągnięć: 43
  • 1.jpg (0,15 MB) - ściągnięć: 52
  • zadanie JZ.rar (0,28 MB) - ściągnięć: 41

Pozostało 580 znaków

2017-05-25 23:10
2
 },
]

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


Chcesz pomocy - pokaż kod - abrakadabra źle działa z techniką.

Pozostało 580 znaków

2017-05-28 09:39
0

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

edytowany 1x, ostatnio: babbuki, 2017-05-28 09:40

Pozostało 580 znaków

2017-05-28 13:20
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;
        }
    }
edytowany 3x, ostatnio: Mr.Smith, 2017-05-28 13:25
Wielkie dzięki, o to mi chodziło. Wszystko działa teraz - babbuki 2017-05-28 22:29

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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