Can't load json data into DataTable
Can't load json data into DataTable

json file :
{
"rank": {"1"},
"name": {"ok"},
"score": {"123,456,789"},
"time": {0.01},
"streak": {"5"}
"wpm": {2.33},
"LastSeen": {"11/10/2019"}
}
and this code into test.html file :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<title>#test Trivia Scores on ThaiIRC</title>
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="css/dataTables.min.css">
<link rel="stylesheet" href="css/fixedHeader.dataTables.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.fixedHeader.min.js"></script>
</head>
<body class="anibg">
<table id="example" class="display" style="width:100%">
<thead><tr><th>#</th><th>Nick Name</th><th>Score</th><th>Best Time</th><th>Best Streak</th><th>Best WPM</th><th>Last Seen</th></tr></thead>
<tfoot><tr><th>#</th><th>Nick Name</th><th>Score</th><th>Best Time</th><th>Best Streak</th><th>Best WPM</th><th>Last Seen</th></tr></tfoot>
</table>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajaxSource": "hof.txt",
"columns": [
{ "data": "rank" },
{ "data": "name" },
{ "data": "score" },
{ "data": "time" },
{ "data": "streak" },
{ "data": "wpm" },
{ "data": "LastSeen" }
]
} );
} );
</script>
but, it nothing happened how to fix it? thanks very much some guy, sir.
This discussion has been closed.
Answers
You can use jsonlint to check the JSON format. Its not valid. Plus it needs to be an array of objects as described here:
https://datatables.net/manual/ajax
ajaxSrouce is a legacy option for Datatables 1.9. If you are using 1.10.x (which is highly recommended to use the latest version 1.10.20) then you should use the
ajax
option.Last it looks like you might be trying to load a local text file. This won't work as you will need to serve it from a server. Web browsers don't allow direct access to the file system for security reasons.
Kevin
i'm using v. 1.0.20, when i tried
json:
and test.html
page cannot be loaded and found an eror. how do ifix it. Thanks.
This is making
data
the string"data.json"
, not the contents of the variable.What is the error you are getting?
Kevin
Also since your JSON is arrays rather than objects, remove the
columns.data
options.Beyond that, we'd need a link to a test case showing the issue.
Allan