JavaScript 循环遍历 JSON 数据并以 html 格式打印

Question

我是 JavaScript 新手，我正在尝试弄清楚如何循环 JSON 并在 HTML 中打印每个选定的值。我下面的解决方案可以完成我想要的一切，除了打印 JSON 数据的“所有”行。它只打印最后一张。我一直在 StackOverflow 和其他地方进行研究，但没有找到解决方案。抱歉，如果这是一个多余的问题，感谢您的帮助!

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

Answer 1

在 for 循环中，您将在每次迭代中重新分配元素的内容。这意味着您在第一次运行 for 时用数组的第一项填充元素，但第二次运行它时，您将元素的内容替换为数组的第二项。因此您只能获得最后一项数据。为了解决这个问题，您应该在每次迭代中“增加”元素的内容，而不是替换它。要实现这一点，您可以替换以下行

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

与

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

+= 运算符对字符串进行串联