如何用JavaScript的Response.json获取动态JSON并渲染至HTML？

你的代码存在三个核心问题： #

• 未解析fetch响应：fetch返回的是Response对象，必须调用.json()方法才能将其转为可操作的JSON数据
• 变量未定义：函数内使用了未声明的data变量，应该用传入的参数
• 循环对象错误：直接遍历原响应对象无意义，需要先定位到JSON里的目标数组层级

修正后的完整代码 #

fetch("https://sodlapp.com/apply/data.json")
  .then(function (response) {
    // 第一步：将Response解析为JSON格式数据
    return response.json();
  })
  .then(function (data) {
    // 第二步：定位到JSON结构中的目标数组
    const paymentList = data.salaryPaymentDetails.result;
    appendData(paymentList);
  })
  .catch(error => console.log('请求或解析错误:', error));

function appendData(paymentList) {
  const mainContainer = document.getElementById("myData");
  // 遍历目标数组处理数据
  for (let i = 0; i < paymentList.length; i++) {
    const item = paymentList[i];
    // 打印验证数据
    console.log(item.amount);
    
    // 以下是渲染到HTML的示例（可根据需求调整结构）
    const div = document.createElement("div");
    div.innerHTML = `
      <p>金额：${item.amount}</p>
      <p>类型：${item.type}</p>
      <hr>
    `;
    mainContainer.appendChild(div);
  }
}

关键说明 #

1. response.json()是异步操作，必须通过额外的.then()处理解析后的数据
2. 需提前确认JSON结构的层级，先拿到目标数组再遍历
3. 确保HTML中存在id为myData的容器元素，例如：<div id="myData"></div>

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