使用 Javascript 从 JSON 文件中提取数据到 HTML

Question

我正在尝试从 JSON 文件中提取数据以放在我的网站上，我遵循了本指南： https : //developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON但我的页。

我把我的代码放在这里： https : //codepen.io/anon/pen/mMGjxK

我的 HTML：

<!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：

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：

{"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":"四" }
]}

Answer 1

这是您的 JSON。 删除最后一个逗号。

{ "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": "四" } ] }

Answer 2

首先，您的 json 无效（最后一个逗号），但下面的代码用于使用 XMLHttpRequest 获取内容。 您应该使用有效的 json 源并重试。 您可以通过https://jsonlint.com/验证您的 json

其次，您将 appendChild 置于 for 循环之外。 那么它是不可附加的。 检查我的固定代码。

 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>

使用 Javascript 从 JSON 文件中提取数据到 HTML

问题描述

2 个解决方案

解决方案1
1 2017-08-27 03:28:21

解决方案2
0 已采纳 2017-08-27 03:39:21

使用 Javascript 从 JSON 文件中提取数据到 HTML

问题描述

2 个解决方案

解决方案1 1 2017-08-27 03:28:21

解决方案2 0 已采纳 2017-08-27 03:39:21

解决方案1
1 2017-08-27 03:28:21

解决方案2
0 已采纳 2017-08-27 03:39:21