Saya mencoba menarik data dari file JSON untuk diletakkan di situs web saya, saya mengikuti panduan ini: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON tetapi tidak ada yang muncul di halaman saya.

Saya telah memasukkan kode saya di sini: https://codepen.io/anon/pen/mMGjxK

HTML saya:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sandbox</title>
    </head>
    <body>
        This is a test.
        <section>
        </section>
        <script src="script.js"></script>
    </body>
</html>

JS saya:

var section = document.querySelector('section');
var retrieveData = 'https://raw.githubusercontent.com/okayauco/flashcards/master/sandbox/vocab-sandbox.json';
var request = new XMLHttpRequest();
request.open('GET', retrieveData);
request.responseType = 'JSON';
request.send();
request.onload = function() {
    var vocabWords = request.response;
    showWords(vocabWords);
}
function showWords(jsonObj) {
    var words = jsonObj['vocabulary'];
    for (var i = 0; i < words.length; i++) {
        var theArticle = document.createElement('article');
        var inEnglish = document.createElement('p');
        var inRomaji = document.createElement('p');
        var inHiragana = document.createElement('p');
        var inKanji = document.createElement('p');
        inEnglish.textContent = words[i].English;
        inRomaji.textContent = words[i].Romaji;
        inHiragana.textContent = words[i].Hiragana;
        inKanji.textContent = words[i].Kanji;
    }

    theArticle.appendChild(inEnglish);
    theArticle.appendChild(inRomaji);
    theArticle.appendChild(inHiragana);
    theArticle.appendChild(inKanji);
    section.appendChild(theArticle);
}

JSON saya:

{"vocabulary":[
{"English":"one", "Romaji":"ichi", "Hiragana":"ぃち", "Kanji":"⼀" },
{"English":"two", "Romaji":"ni", "Hiragana":"に", "Kanji":"ニ" },
{"English":"three", "Romaji":"san", "Hiragana":"さん", "Kanji":"三" },
{"English":"four", "Romaji":"yon", "Hiragana":"よん", "Kanji":"四" }
]}
1
user7233151 27 Agustus 2017, 05:57

2 jawaban

Jawaban Terbaik

Pertama, json Anda tidak valid (koma terakhir), tetapi kode di bawah ini digunakan untuk mendapatkan konten menggunakan XMLHttpRequest. Anda harus menggunakan sumber json yang valid dan coba lagi. Anda dapat memvalidasi json Anda dengan https://jsonlint.com/

Kedua, Anda mengeluarkan appendChild dari for loop. Maka itu tidak dapat ditambahkan. Periksa kode tetap saya.

var section = document.querySelector('section');

var xhttp = new XMLHttpRequest();
xhttp.responseType = 'JSON';
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var vocabWords = this.response;
      document.getElementById("demo").innerHTML = vocabWords;
      showWords(JSON.parse(vocabWords.replace('"四" },', '"四" }'))); // <= This should work with a valid json format.
    }
};
xhttp.open("GET", "https://raw.githubusercontent.com/okayauco/flashcards/master/sandbox/vocab-sandbox.json", true);
xhttp.send();

function showWords(jsonObj) {
  var words = jsonObj['vocabulary'];

  for (var i = 0; i < words.length; i++) {
    var theArticle = document.createElement('article');
    var inEnglish = document.createElement('p');
    var inRomaji = document.createElement('p');
    var inHiragana = document.createElement('p');
    var inKanji = document.createElement('p');

    inEnglish.textContent = words[i].English;
    inRomaji.textContent = words[i].Romaji;
    inHiragana.textContent = words[i].Hiragana;
    inKanji.textContent = words[i].Kanji;

    theArticle.appendChild(inEnglish);
    theArticle.appendChild(inRomaji);
    theArticle.appendChild(inHiragana);
    theArticle.appendChild(inKanji);

    section.appendChild(theArticle);
  };
};
    This is a test. 
    <section> 
    </section> 

<div id="demo"></div>
0
Duc Filan 27 Agustus 2017, 04:20

Ini adalah JSON Anda. Hapus koma terakhir.

{ "vocabulary": [{ "English": "one", "Romaji": "ichi", "Hiragana": "ぃち", "Kanji": "⼀" }, { "English": "two", "Romaji": "ni", "Hiragana": "に", "Kanji": "ニ" }, { "English": "three", "Romaji": "san", "Hiragana": "さん", "Kanji": "三" }, { "English": "four", "Romaji": "yon", "Hiragana": "よん", "Kanji": "四" } ] }

1
adda82 27 Agustus 2017, 03:28