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

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

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

请把文字代码贴出来，不要发图片的，不方便复制
参考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() 函数来渲染所有歌曲到页面上。

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

代码部分（方便复制）

      
 let playList=document.getElementById('playList')
// 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
function ajaxRequest() {
   // 1 、我们首先要创建 XMLHttpRequest
   let  xmlhttprequest = new XMLHttpRequest();
   // 2 、调用 open 方法设置请求参数
   xmlhttprequest.open("GET","http://localhost:3000/artist/top/song?id=6452",true)
   // 4 、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
   xmlhttprequest.onreadystatechange = function(){
      if ( xmlhttprequest.readyState == 4 &&  xmlhttprequest.status == 200) {
         let jsonObj = JSON.parse( xmlhttprequest.responseText);
         console.log(jsonObj)
       test(jsonObj)
   
 
}

   } 
   xmlhttprequest.send();
}
 
   

ajaxRequest() 

function test(data){
   let playList=document.getElementById('playList')
      playList.innerHTML=`${data.songs[0].name}`
     }