使用接口返回的数组数据生成HTML动态卡片时forEach失效求助

问题原因 #

• 从localStorage取出的是JSON字符串，你没有通过JSON.parse反序列化为JavaScript对象，反而用new Array(data)把字符串包装成了只有一个字符串元素的数组，自然无法获取到data属性调用forEach
• 数据结构匹配错误：你返回的接口数据里，要遍历的列表存放在data.data.rows字段下，不是arr.data
• 模板里的button标签存在语法错误，style属性未闭合
• 原有模板里session name字段绑定的值错误，绑定成了sub_id

修复后的下一页代码 #

<script>
    // 读取并反序列化localStorage数据
    var rawData = localStorage.getItem('myData');
    // 可选优化：添加非空判断避免无数据时报错
    if (!rawData) {
        alert('未找到有效数据');
    }
    var data = JSON.parse(rawData);
    // 获取待遍历的行数据数组
    var rows = data.data.rows;
    const container = document.getElementById('aa');

    // 遍历数组生成卡片
    rows.forEach((result, idx) => {
      const content = `
        <div class="card" style="width:700px;height: 150px">
          <div class="card-body">
            <li> Session Name :${result.session_name}</li>
            <li> Sub ID :${result.sub_id}</li>
            <li> Date :${result.date}</li>
            <li> Patient ID : ${result.p_id}</li>
            <!-- 修复style属性未闭合问题，补充color属性值 -->
            <button class="btn btn-link" style="width: 60px;height: 30px;background-color:#d1b147;color:#fff;" data-toggle="collapse" data-target="#collapse-${idx}" aria-expanded="true" aria-controls="collapse-${idx}">
              View
            </button>
          </div>
        </div>
      `;
      container.innerHTML += content;
    })
</script>

内容的提问来源于stack exchange，提问作者fungusblacky