如何用js渲染数据到页面上

Question

我在控制台上获取了数据，目前只会渲染第一个数据到页面上，如何运用for循环将所有数据渲染上

（希望可以把完整代码写出来，不写代码看不懂，谢谢）

Answer 1

请把文字代码贴出来，不要发图片的，不方便复制
参考gpt，要渲染所有的数据，你需要使用循环来遍历每个数据并在循环内部进行渲染。例如，你可以使用 forEach() 方法来遍历歌曲列表并将每个歌曲的名字渲染到页面上。

以下是一个示例代码：

function renderPlaylist(data) {
  let playList = document.getElementById('playList');
  data.songs.forEach(function(song) {
    let li = document.createElement('li');
    li.textContent = song.name;
    playList.appendChild(li);
  });
}

function ajaxRequest() {
  let xmlhttprequest = new XMLHttpRequest();
  xmlhttprequest.open("GET","http://localhost:3000/artist/top/song?id=6452",true);
  xmlhttprequest.onreadystatechange = function() {
    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
      let jsonObj = JSON.parse(xmlhttprequest.responseText);
      renderPlaylist(jsonObj);
    }
  }; 
  xmlhttprequest.send();
}

ajaxRequest();

在上面的代码中，renderPlaylist() 函数遍历 data.songs 数组并创建一个 li 元素来包含每个歌曲的名称，并将其添加到 playList 元素中。然后在 ajaxRequest() 函数中，当 AJAX 请求完成并且响应状态为 200 时，调用 renderPlaylist() 函数来渲染所有歌曲到页面上。

希望这个例子对你有所帮助！