Javascript从API取数据填充DataTable遇undefined错误及数据不显示

看起来你已经能成功获取API数据，但在填充到DataTable时遇到了几个关键问题，导致表格无法显示数据并出现undefined错误。我们一步步来修复：

1. 修正API数据的遍历对象 #

从你提供的API返回结构来看，实际的列表数据是在response.data属性里（而非整个response对象）。你当前直接遍历apirun（也就是完整的API响应），会导致遍历到statusCode等非数据字段，从而出现v.id未定义的错误。

修改tablo_getir里的遍历部分：

// 原代码：$.each(apirun, function(k, v) {
// 修改为：
$.each(apirun.data, function(k, v) {
  // 后续行添加逻辑不变
});

2. 修正DataTable的初始化与行操作逻辑 #

你的代码里dt.clear().row();是错误写法，clear()之后不需要链式调用row()；而且每次添加行后立即draw(false)会影响性能，建议循环完所有行后统一绘制表格。

修改后的tablo_getir函数：

function tablo_getir() {
  var dt = $('#base-style').DataTable();
  // 清空表格现有数据
  dt.clear();
  var apirun = getApi("/api/campaigns/");
  
  // 遍历API返回的实际数据列表
  $.each(apirun.data, function(k, v) {
    // 注意：直接使用HTML标签，无需转义成<这类字符
    dt.row.add([
      `<button class="btn btn-inverse" id="${v.id}" href="#" data-toggle="modal" data-target="#subeDetay" title="Detay"><i class="icofont icofont-eye-alt"></i></button>`,
      v.id,
      v.name,
      `<button class="btn btn-success" id="${v.id}" href="#" data-toggle="modal" data-target="#subeDuzenle" title="Düzenle"><i class="ti-pencil-alt"></i></button>
       <button class="btn btn-danger" id="${v.id}" title="Sil" href="#" data-toggle="modal" data-target="#delete"><i class="ti-trash"></i></button>`
    ]);
  });
  
  // 统一绘制表格，刷新显示
  dt.draw();
}

3. 替换转义的HTML字符 #

你代码里用了<、>这些HTML转义字符，在JS字符串里直接写<、>即可，否则表格会显示这些转义字符而非实际的按钮。

4. （可选）移除同步AJAX请求 #

你的getApi函数用了async: false，这是已被弃用的同步请求方式，会阻塞浏览器主线程。建议改成异步方式，用Promise处理：

function getApi(url, request) {
  $('#alertSuccess').fadeOut('slow');
  // 返回Promise对象
  return new Promise((resolve, reject) => {
    $.ajax({
      url: apiUrl + url + tokenim,
      type: 'get',
      headers: {
        'Content-Type': 'application/json',
      },
      dataType: 'json',
      success: function(data) {
        console.info(data);
        if (data.statusCode != 200) {
          alert(data.message);
          reject(data.message);
        } else {
          resolve(data);
        }
      },
      error: function() {
        $('#alertDanger').fadeIn('slow');
        $('#alertDanger .alert').text("Api çalışmasında hata oluştu");
        $('#alertDanger').fadeOut(5000);
        reject("Api çalışmasında hata oluştu");
      }
    });
  });
}

// 同步函数改为异步函数
async function tablo_getir() {
  var dt = $('#base-style').DataTable();
  dt.clear();
  try {
    var apirun = await getApi("/api/campaigns/");
    $.each(apirun.data, function(k, v) {
      dt.row.add([
        `<button class="btn btn-inverse" id="${v.id}" href="#" data-toggle="modal" data-target="#subeDetay" title="Detay"><i class="icofont icofont-eye-alt"></i></button>`,
        v.id,
        v.name,
        `<button class="btn btn-success" id="${v.id}" href="#" data-toggle="modal" data-target="#subeDuzenle" title="Düzenle"><i class="ti-pencil-alt"></i></button>
         <button class="btn btn-danger" id="${v.id}" title="Sil" href="#" data-toggle="modal" data-target="#delete"><i class="ti-trash"></i></button>`
      ]);
    });
    dt.draw();
  } catch (err) {
    console.error(err);
  }
}

最后检查点 #

• 确保DataTable初始化时的列数和row.add里的数组长度完全一致
• 确认API返回的apirun.data是数组类型，且每个元素都包含id和name属性

按照以上步骤修改后，应该就能正常将API数据填充到DataTable中了。

内容的提问来源于stack exchange，提问作者Mustafa Sarıdal