数据表未填充来自 RestAPI 调用的数据

问题描述

尝试将我的 api 读回数据表时，我收到错误“无法读取未定义的属性‘长度’”

我的表如下：

 <div class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center">
        <div class=" row d-flex justify-content-center ">


            <!-- Table -->

            <table id="movieTable" class="table table-striped">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Year</th>

                    </tr>
                </thead>
                <tbody id="list-list">

                </tbody>
            </table>

        </div>
    </div>

我的脚本如下：

<script>
        $('#movieTable').DataTable({

            "ajax": "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi.PHP?id=1",dataSrc: "","columns": [

                {
                    "data": "Title"
                },{
                    "data": "Year"
                },]
        });
    </script>

我看不出我做错了什么，感谢您的帮助！

编辑，根据给出的建议，我将脚本编辑为以下内容：

<script>
        $('#movieTable').dataTable({
            ajax: {
                url: "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi.PHP?id=2",dataSrc: "tv_shows","columns": [

                    {
                        "Title": "Title"
                    },{
                        "Year": "Year"
                    },]

            },});
    </script>

我的 JSON 响应如下：

{
    "status": "true","message": "Customer Details","tv_shows": {
        "id": "456","Title": "Vampire Knight","Year": "2008","Age": "16+","IMDb": "7.5","RottenTomatoes": "","Netflix": "1","Hulu": "1","Prime": "0","disney": "0"
    }
}

我认为我的 api 可能有问题，我已将其设置为根据查询的 ID 返回值。如果我不添加 ?id='x' 我的响应如下：

{
    "status": "false","message": "No customer(s) found!"
}

用于构建我的 api 的代码是：

//return JSON by id
    if (isset($_GET['id']) && $_GET['id']!="") {
     
     $id = $_GET['id'];
     $query = "SELECT * FROM tv_shows WHERE id={$id}";
     $result = MysqLi_query($conn,$query);
     $row = MysqLi_fetch_array($result,MysqLI_ASSOC);
     
     $tableData['id'] = $row['id'];
     $tableData['Title'] = $row['Title'];
     $tableData['Year'] = $row['Year'];
     $tableData['Age'] = $row['Age'];
     $tableData['IMDb'] = $row['IMDb'];
     $tableData['RottenTomatoes'] = $row['RottenTomatoes'];
     $tableData['Netflix'] = $row['Netflix'];
     $tableData['Hulu'] = $row['Hulu'];
     $tableData['Prime'] = $row['Prime'];
     $tableData['disney'] = $row['disney'];
    
    
     
     $response["status"] = "true";
     $response["message"] = "Customer Details";
     $response["tv_shows"] = $tableData;
     
    } else {
     $response["status"] = "false";
     $response["message"] = "No customer(s) found!";
    }
    echo json_encode($response); exit;

更新了 api 代码以返回一组对象，而不仅仅是一个对象

JSon 响应如下：

{
    "data": [
        {
            "Title": "Breaking Bad","Age": "18+","IMDb": "9.5","Rotten Tomatoes": "96%","Hulu": "0","disney": "0"
        },{
            "Title": "Stranger Things","Year": "2016","IMDb": "8.8","Rotten Tomatoes": "93%",

数据表脚本是：

 <script>
      
      $('#movieTable').DataTable({
    "processing": true,"serverSide": true,"sPaginationType": "full_numbers","order": [],"ajax": {
        "url": "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi2.PHP","type": 'get',"dataType": 'json'
    },"columns": [
        { "data": "Title" },{ "data": "Year" },]
});
    
    </script>

数据表中仍然没有数据！

解决方法

感谢@andrewjames 的帮助！

我不得不更改我的 api 以输出一组对象而不是一个对象，并确保 JSON 输出与数据表文档中定义的输出相匹配。

工作JS代码：

 <script>
      
      
            $(document).ready(function() {
    $('#movieTable').DataTable( {
        "ajax": {
            "url": "http://kmoffett07.lampt.eeecs.qub.ac.uk/serverSide/buildapi2.php","dataSrc": "data"
        },"columns": [
            { "data": "id" },{ "data": "Title" },{ "data": "Year" },{ "data": "Age" },{ "data": "IMDb" },{ "data": "Rotten Tomatoes" },]
    } );
} );


    </script>

HTML 表格结构：

<div class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center">
        <div class=" row d-flex justify-content-center ">


            <!-- Table -->

            <table id="movieTable" class="display" style="width:100%">
        <thead>
            <tr>
            <th>id</th>
                <th>Title</th>
                <th>Year</th>
                <th>Age</th>
                <th>IMDb</th>
                <th>Rotten Tomatoes</th>
                
                
        
            </tr>
        </thead>
      
    </table>

        </div>
    </div>