Can't load json data into DataTable

Can't load json data into DataTable

dlsocooldlsocool Posts: 2Questions: 1Answers: 0

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.

Answers

  • kthorngrenkthorngren Posts: 20,276Questions: 26Answers: 4,765

    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

    "ajaxSource": "hof.txt",

    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

  • dlsocooldlsocool Posts: 2Questions: 1Answers: 0

    i'm using v. 1.0.20, when i tried

    json:

    {
      "data": [ 
            [
            "1",
            "Nick",
            "14,212,282",
            "2.563",
            "54",
            "23.410066",
            "01/06/2019"
            ],
            [
            "2",
            "Atom",
            "5,075,320",
            "2.61",
            "68",
            "134.60904",
            "05/10/2019"
            ]
        ]
    }
    

    and test.html

    $(document).ready(function() {
        var table = $('#example').DataTable( {
            "ajax": "data.json"
            fixedHeader: {
                header: true,
                footer: false
            }
        } );
    } );
    

    page cannot be loaded and found an eror. how do ifix it. Thanks.

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    "ajax": "data.json"

    This is making data the string "data.json", not the contents of the variable.

  • kthorngrenkthorngren Posts: 20,276Questions: 26Answers: 4,765
    edited October 2019

    page cannot be loaded and found an eror

    What is the error you are getting?

    Kevin

  • allanallan Posts: 61,667Questions: 1Answers: 10,096 Site admin

    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

This discussion has been closed.