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循环之外。然后它不可附加。检查我的固定代码。

＆＃13;

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);
  };
};

＆＃13;

    This is a test. 
    <section> 
    </section> 

<div id="demo"></div>

＆＃13;

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

2 个答案: