pulling data from JSON file to HTML with Javascript

Question

I am trying to pull data out of a JSON file to put on my website, I followed this guide: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON but nothing appears on my page.

I've put my code here: https://codepen.io/anon/pen/mMGjxK

My 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>

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

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

In you JSON file, can you remove the last comma before closing the array. JS is not able to parse the response into a JSON. — Gunner
– Gunner, Commented Aug 27, 2017 at 3:24
I've removed the last comma and still nothing happens with the code as written above. If I try DucFilan's code, it sort of displays with his added div but I am still wondering why none of the appendChild's work — user7233151
– user7233151, Commented Aug 27, 2017 at 3:50
a small tip. I always copy paste json data into a browsers js console to check if it is valid and formatted properly. — Neville Nazerane
– Neville Nazerane, Commented Aug 27, 2017 at 4:13

adda82 · Accepted Answer · 2017-08-27 03:28:21Z

1

It is your JSON. Remove last comma.

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

answered Aug 27, 2017 at 3:28

adda82

1751 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Duc Filan · Accepted Answer · 2017-08-27 04:20:21Z

0

First, your json is invalid (last comma), but below code is used for getting the content using XMLHttpRequest. You should use a valid json source and try again. You can validate your json by https://jsonlint.com/

Second, you put the appendChild out of the for loop. Then it's not appendable. Check my fixed code.

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>

edited Aug 27, 2017 at 4:20

answered Aug 27, 2017 at 3:39

Duc Filan

7,2073 gold badges24 silver badges26 bronze badges

2 Comments

user7233151 Over a year ago

Thank you, the JSON displays using your div and xhttp code and after I remove the last comma but I am wondering why none of the appendChild's work. If I use your method, I'm guessing I should just take those out since they don't seem to do anything. Do you know why those aren't working?

Duc Filan Over a year ago

Because you put the appendChild out of the for loop.

Collectives™ on Stack Overflow

pulling data from JSON file to HTML with Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related