帶有DataTables的Javascript JSON數據

Question

我在jQuery DataTables中使用JavaScript，但是在將JSON數據加載到Bootstrap表中時遇到了問題。

這是表的示例

[ { name: 'Bryant Stone',       hobbies: 'Football',       favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith',        hobbies: 'boxing',          favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef',       hobbies: 'cooking',         favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
]

在JavaScript中，我以這種格式獲取數據並將其放入JavaScript中，如下所示

$(document).ready(function(){
    $(\'#respondent\').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
                {title:"Name", data: "name"},
                {title:"Hobbies", data: "hobbies"},
                {title:"Favorite team" ,data: "favorite_team"},
                {title: "Height" ,data: "height"}
            ]
    });
})

當我加載頁面時，它會在控制台中顯示我的數據，但“數據表”對話框會顯示此消息

DataTable warning table id=respondent-
Requested unknown parameter 'name' for
row0, column 0. For information more.....

我不知道還能做什么。 我花了整整一天的時間。 任何幫助，將不勝感激。

更新感謝所有幫助我提供一些我已經完成的答案的人。 這是我的HTML

<table class="display" id="respondent">
    <thead>

        <tr>

            <th>Name</th>
            <th>Hobbies</th>
            <th>Favorite Team</th>
            <th>Height</th>
        </tr>

    </thead>
</table>

我已經對前面顯示的代碼進行了拼寫錯誤校正，但是我仍然繼續收到此錯誤消息

DataTables warning: table id=respondent- 
Requested unknown parameter 'name' for 
row 0, column 0, for more information about this 
error, please see http://datatables.net/tn/4

我去了鏈接，但沒有任何幫助。 出現上述消息后，表中充滿了空白，進入某些頁面后，我僅在第一個單元格中看到一個字符。 我不知道這些字符是字母還是括號，因為即使出現數字，我也無法在json數據中看到這樣的序列。 它一直困擾着我，我不知道該怎么辦。 任何幫助，將不勝感激。

更新我發現問題在於數據在字符串中。 有誰知道如何在不使用eval（）的情況下將javascript中的字符串轉換為對象。 JSON.parse返回字符串，而不是要查找的對象。

Answer 1

小改動：

1. , data選項后缺失
2. 列以favourite_team （英式英語）形式傳遞，但數據具有favourite_team （美式英語）形式
3. 列包含其中作為數據包含在第一行中的愛好 的愛好而霍在其他行。 你要匹配他們。
4. 在列中使用title選項以顯示標題名稱

信息：該錯誤/警報通常是由於缺少數據列造成的。

這是修復以上問題的代碼段：

 $(document).ready(function(){ var jsonStr1 = [ { name: 'Bryant Stone', hobbies: 'Football', favorite_team: 'Sea hawks', height: '5 Feet 10 in' }, { name: 'Jesse Smith', hobbies: 'boxing', favorite_team: 'Spurs', height: '6 feet 6 in' }, { name: 'Emily Wyclef', hobbies: 'cooking', favorite_team: 'Venus Williams', height: '5 feet 2 in' } ]; $('#respondent').dataTable({ destroy: true, data: jsonStr1, columns:[ {title: "name", data: "name"}, {title: "hobbies", data: "hobbies"}, {title: "favorite_team", data: "favorite_team"}, {title: "height", data: "height"} ] }); }) 

 <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <table id="respondent" class="display"> <thead> </thead> <tbody> </tbody> </table> 

希望這可以幫助。

Answer 2

列名的錯字錯誤-愛好是提到“霍”和FAVOürite_team為favorite_team。

為所有對象保持相同的屬性名稱，以避免該錯誤

參考代碼示例-https: //codepen.io/nagasai/pen/vzNXPe

HTML：

<table class="display" id="respondent">
    <thead>

        <tr>

            <th>Name</th>
            <th>Hobbies</th>
            <th>Favorite Team</th>
            <th>Height</th>
        </tr>

    </thead>
</table>

JS

var jsonStr1 = [ { name: 'Bryant Stone',  hobbies: 'Football', favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith', hobbies: 'boxing', favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef', hobbies: 'cooking',  favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
]

$(document).ready(function() {
 $('#respondent').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
            {title:"Name", data: "name"},
            {title:"Hobbies", data: "hobbies"},
            {title:"Favorite team" ,data: "favorite_team"},
            {title: "Height" ,data: "height"}
        ]
    });
} );