JavaScript loop through JSON data and print in html

Question

I'm new to JavaScript and I'm trying to figure out how-to loop through JSON and print each selected value in HTML. My solution below does everything I want except print "all" rows of the JSON data. It only prints the last one. I've been researching on StackOverflow and elsewhere, but I'm not finding the solution. Sorry if this is a redundant question and thank you for your help!

    //Fetch JSON from URL
    //https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch('https://s.codetasty.com/toddbenrud/sandBoxToddBenrud/example/songData.json')
          .then(function(response) {
            return response.json();
          })
          .then(function(myJson) {
                var songData = (JSON.stringify(myJson));
                //https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript 
                var index;
                var obj = JSON.parse(songData);
                for (index = 0; index < obj.length; ++index) {

                    var student_name = obj[index]['name'];
                    var student_email = obj[index]['email'];
                    var song_name = obj[index]['song'];
                    var song_url = obj[index]['url'];

                    document.getElementById("studentName").innerHTML = '<br>'+student_name;
                    document.getElementById("studentEmail").innerHTML = '<br>'+student_email;
                    document.getElementById("songTitle").innerHTML = '<br>'+song_name;
                    document.getElementById("songURL").innerHTML = '<br>'+song_url;
                }
          });

use `index++` instead of `++index` – fin444 Sep 12 '19 at 02:54 — fin444, Sep 12 '19 at 02:54

score 2 · Answer 1 · answered Sep 12 '19 at 03:00

Becasue you set string for elements, don't add string.

Replace from:

document.getElementById("studentName").innerHTML = '<br>'+student_name;
document.getElementById("studentEmail").innerHTML = '<br>'+student_email;
document.getElementById("songTitle").innerHTML = '<br>'+song_name;
document.getElementById("songURL").innerHTML = '<br>'+song_url;

To:

document.getElementById("studentName").innerHTML += '<br>'+student_name;
document.getElementById("studentEmail").innerHTML += '<br>'+student_email;
document.getElementById("songTitle").innerHTML += '<br>'+song_name;
document.getElementById("songURL").innerHTML += '<br>'+song_url;

Rander Gabriel · Accepted Answer · 2019-09-12T04:21:53.287

Inside your for loop you are reassigning your elements' content in every Iteration. It means that you fill your elements with the First item of the Array on the First time you run the for, but the Second time you run It, you replace the elements' content with the Second item of the Array. So you get only the Last Item Data. To solve this problema, you should "increment" your element's content on each Iteration, instead of replace it. To achieve that, you replace the Lines like

document.getElementById("studentName").innerHTML = '<br>'+student_name;

With

document.getElementById("studentName").innerHTML += '<br>'+student_name;

The += operator does a concatenation on strings

JavaScript loop through JSON data and print in html

2 Answers2