时间戳

首页 > 解决方案 > 未捕获的 TypeError：Ajax 调用中未定义数据

javascript - 未捕获的 TypeError：Ajax 调用中未定义数据

问题描述

我的问题是我正在进行 ajax 服务器端调用以检索显示信息，我得到一个 JSON，它是一个对象，里面有一个对象的 ArrayList，但是当我尝试进行调用时，我得到一个带有标签的表处理中...一直在浏览器日志中出现此错误。

有谁知道为什么会这样？

这是我的 HTML：

<table id="table_newsletterlist" class="display table">
                <thead>
                <tr>
                    <!-- Newsletters attributes -->
                    <th>Id</th>
                    <th>Asunto</th>
                    <th>Para</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <!-- Newsletters attributes -->
                    <td>Id</td>
                    <td>Asunto</td>
                    <td>Para</td>
                </tr>
                </tfoot>
            </table>

这是我的JS：

$('#table_newsletterlist').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": newsletterUrl,
    "columns": [
        {
            "data": "newsletters",
            render: function (data){
                return (data.id) ? data.id : "-";
            }
        },
        {"data": "newsletters",
            render: function (data){
                return (data.target) ? data.target : "-";
            }},
        {"data": "newsletters",
            render: function (data){
                return (data.subject) ? data.subject : "-";
            }},
    ]
});

这里是我得到的 JSON：

{"total":188,"newsletters":[{"id":1,"subject":"Prueba","target":"groups","html":"<html>\r\n<head>\r\n\t<title></title>\r\n</head>\r\n<body>Probando</body>\r\n</html>\r\n","sender_id":1,"campaign_folder_id":null,"segment_id":null,"group_ids":[],"preview_text":null,"editor_type":"html","url_token":false,"analytics_utm_campaign":"","use_premailer":false}, {more objects like the first...}],"perPage":10,"page":1}

标签： javascripthtmlajaxdatatables

解决方案

我做了以下更改：

  1. 因为您的 JSON 的行数据数组具有名称newsletters，所以您需要在数据表的 ajax 部分中引用此名称："dataSrc": "newsletters"。这告诉 DataTables 在 JSON 中查找其行迭代器的起点的位置。

  2. 从第 1 点开始，现在您可以在您的columns部分中引用每个数组对象中的特定字段 - 例如：data: 'id'.

  3. 为了简化-没有数据时的使用，我推荐使用defaultContent: "-". 您可以使用渲染功能 - 但对于您的具体示例，这比您需要的更复杂。

最终结果如下：

$(document).ready(function() {

  $('#table_newsletterlist')
    .DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
        "url": "http://localhost:7000/newsletters",
        "type": "POST",
        "dataSrc": "newsletters"
      },
      "columns": [{
        data: 'id',
        defaultContent: "-"
      }, {
        data: 'subject',
        defaultContent: "-"
      }, {
        data: 'target',
        defaultContent: "-"
      }, {
        data: 'preview_text',
        defaultContent: "-"
      }]
    });

});

推荐阅读