hhhhhh9980 2023-03-25 16:06 采纳率: 50%
浏览 39
已结题

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

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

img

img


(希望可以把完整代码写出来,不写代码看不懂,谢谢)

  • 写回答

2条回答 默认 最新

  • 「已注销」 2023-03-25 16:13
    关注

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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月2日
  • 已采纳回答 3月25日
  • 创建了问题 3月25日

悬赏问题

  • ¥20 keepalive配置业务服务双机单活的方法。业务服务一定是要双机单活的方式
  • ¥50 关于多次提交POST数据后,无法获取到POST数据参数的问题
  • ¥15 win10,这种情况怎么办
  • ¥15 如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式?(相关搜索:格式化)
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Matlab求解微分方程,如何用fish2d进行预优?