Codeigniter 4 如何用jQuery遍历Ajax返回的JSON并展示到视图

结构识别 #

你拿到的接口返回JSON包含两类结构，处理逻辑有区别：

• 顶层字段peserta：扁平普通键值对象，无数组层级，不需要做逐元素循环
• 顶层字段event：对象数组，需要逐条目遍历每个子对象取属性值

前置准备 #

CI4后端返回JSON时直接用框架内置的响应方法即可，不需要手动拼接JSON字符串：

// CI4控制器中返回数据的示例
$data = [
  'peserta' => $pesertaModel->find($id),
  'event' => $eventModel->where(['peserta_id' => $id])->findAll()
];
return $this->response->setJSON($data);

前端jQuery发起Ajax请求时，要设置dataType: "json"，让jQuery自动把返回的字符串格式JSON解析为可直接操作的JS对象，避免手动解析出错。

具体实现代码 #

1. 基础Ajax请求逻辑 #

$.ajax({
  url: "你的CI4接口路由",
  type: "GET",
  dataType: "json",
  success: function(response) {
    // 分别处理两类结构的数据
    renderPesertaBaseInfo(response.peserta);
    renderRelatedEventList(response.event);
  }
})

2. 普通对象（peserta）的两种处理方式 #

方式一：固定字段精准取值（适合字段明确的业务场景，代码更易维护）

function renderPesertaBaseInfo(pesertaData) {
  const pageHtml = `
    <div class="info-card">
      <h5>参赛者基础信息</h5>
      <p>参赛者ID：${pesertaData.id_peserta}</p>
      <p>所属代表队：${pesertaData.kontingen}</p>
      <p>性别分类：${pesertaData.gender}</p>
      <p>参赛视频文件：${pesertaData.video}</p>
      <p>审核状态：${pesertaData.status == 0 ? "待审核" : "审核通过"}</p>
    </div>
  `;
  // 把渲染好的内容插入页面指定容器
  document.querySelector("#peserta-box").innerHTML = pageHtml;
}

方式二：通用遍历（不需要提前知道所有字段名，适合动态字段场景）

function renderPesertaBaseInfo(pesertaData) {
  let pageHtml = '<div class="info-card"><h5>参赛者基础信息</h5>';
  // 遍历对象所有键值对
  Object.entries(pesertaData).forEach(([fieldName, fieldValue]) => {
    pageHtml += `<p>${fieldName}：${fieldValue}</p>`;
  });
  pageHtml += '</div>';
  document.querySelector("#peserta-box").innerHTML = pageHtml;
}

3. 对象数组（event）的遍历处理 #

数组结构的数据必须逐元素遍历，哪怕当前只有1条记录也不能直接取属性，要先定位到具体数组下标：

function renderRelatedEventList(eventArray) {
  let pageHtml = '<div class="event-list"><h5>关联赛事详情</h5>';
  // 遍历数组每一个条目
  eventArray.forEach((eventItem, index) => {
    // eventItem是数组里的单个赛事对象，可直接取属性
    pageHtml += `
      <div class="event-item">
        <p>第${index + 1}条记录</p>
        <p>选手姓名：${eventItem.nama}</p>
        <p>出生日期：${eventItem.tgl_lahir}</p>
        <p>联系电话：${eventItem.no_hp}</p>
        <p>居住地址：${eventItem.alamat}</p>
      </div>
    `;
  });
  pageHtml += '</div>';
  document.querySelector("#event-box").innerHTML = pageHtml;
}

新手常见注意点 #

• 未设置dataType: "json"时，返回的response是字符串格式，直接取属性会报错，需要手动执行JSON.parse(response)转成JS对象
• 不要把peserta普通对象当数组遍历，两者循环时拿到的回调参数含义不一样：数组遍历的回调第一个参数是数字索引，对象遍历的回调第一个参数是字符串形式的键名
• 直接取数组值时要注意下标越界问题，比如示例里的event数组只有1条数据，取属性时要写response.event[0].nama，不能直接写response.event.nama

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