how to open a json and popular file in a jquery datatable?

Question

I have a gigantic json file and wanted to open it in a datatable jquery

I made a script that populates the . json file in a jquery datatable table, but the problem is that it is not populating the way it would like to: http://www.scarsphoto.com.br/teste/comparacao.html Also, I’m copying/copying and storing in an array of objects and sending popular in the table, so it’s not working.

that’s the script:

        var json = [{
                "tempoNS" : 4251649,
                "tempoMS" : 4,
                "tamanhoArray" : 1999,
                "nome" : "Bubble iterativo"
            }, {
                "tempoNS" : 3064749,
                "tempoMS" : 3,
                "tamanhoArray" : 1999,
                "nome" : "Bubble recursivo"
            }, {
                "tempoNS" : 994920,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Insertion iterativo"
            }, {
                "tempoNS" : 908287,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Insertion recursivo"
            }, {
                "tempoNS" : 1500831,
                "tempoMS" : 1,
                "tamanhoArray" : 1999,
                "nome" : "Selection iterativo"
            }, {
                "tempoNS" : 1461891,
                "tempoMS" : 1,
                "tamanhoArray" : 1999,
                "nome" : "Selection recursivo"
            }, {
                "tempoNS" : 176888,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Merge iterativo"
            }, {
                "tempoNS" : 187754,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Merge recursivo"
            }, {
                "tempoNS" : 105348,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Quick recursivo"
            }, {
                "tempoNS" : 160588,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "Heap recursivo"
            }, {
                "tempoNS" : 100217,
                "tempoMS" : 0,
                "tamanhoArray" : 1999,
                "nome" : "CombSort Sem Otimização"
            }
        ];
        var tamanhoJson = json.length;
        var results = "";

        for (var i = 0; i < tamanhoJson; i++) {
            results += "<tr>";
            results += "<td>" + json[i].tamanhoArray + " Elementos</td>";
            results += "<td>" + json[i].nome + " </td>";
            results += "<td>" + json[i].tempoNS + " ns</td>";
            results += "<td>" + json[i].tempoMS + " ms</td>";
            results += "</tr>";
        } 

        results += "<br />";
        var div = document.getElementById("example");
        console.log(results);
        div.innerHTML = results;    

if I do with data already populated in html, it works: http://scarsphoto.com.br/teste/comparacao-com-dados-ja-populados-no-html

this is . json file you would like to popular in datatable jquery: http://www.scarsphoto.com.br/teste/teste.json

I am following this example: https://www.datatables.net/manual/styling/bootstrap-simple.html

What’s the best way to do it, via ajax? I don’t know such procedure, could tell me how I do?

Answer 1

You can use the $.getJSON jquery to retrieve data.

 var url = "http://www.scarsphoto.com.br/teste/teste.json";
            $.getJSON(url, function (data) {
                popularDataTables(data.d);
  });

Xmlhttprequest cannot load http://www.scarsphoto.com.br/teste/teste.json. In the 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'http://localhost:28026' is therefore not allowed access.

More has generated me the following error that can be solved Here.

You do not need to go through the whole array to fill the table, See that at the end I used the ID table placing its array in the property aaData of Jquery Datables, defining which columns in the table body.

Place the code inside a function and pass the data by parameter.

function popularDataTables(json){
    $('#example').DataTable({
                    "aaData": json,
                    "aoColumns": [
                        { "mDataProp": "tempoNS" },
                        { "mDataProp": "tempoMS" },
                        { "mDataProp": "tamanhoArray" },
                         { "mDataProp": "nome" }
                    ],
                });
}

Follow an example that can help you.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet">
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>tempoNS</th>
                        <th>tempoMS</th>
                        <th>tamanhoArray</th>
                        <th>nome</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            var json = [{
                "tempoNS": 4251649,
                "tempoMS": 4,
                "tamanhoArray": 1999,
                "nome": "Bubble iterativo"
            }, {
                "tempoNS": 3064749,
                "tempoMS": 3,
                "tamanhoArray": 1999,
                "nome": "Bubble recursivo"
            }, {
                "tempoNS": 994920,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Insertion iterativo"
            }, {
                "tempoNS": 908287,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Insertion recursivo"
            }, {
                "tempoNS": 1500831,
                "tempoMS": 1,
                "tamanhoArray": 1999,
                "nome": "Selection iterativo"
            }, {
                "tempoNS": 1461891,
                "tempoMS": 1,
                "tamanhoArray": 1999,
                "nome": "Selection recursivo"
            }, {
                "tempoNS": 176888,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Merge iterativo"
            }, {
                "tempoNS": 187754,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Merge recursivo"
            }, {
                "tempoNS": 105348,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Quick recursivo"
            }, {
                "tempoNS": 160588,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "Heap recursivo"
            }, {
                "tempoNS": 100217,
                "tempoMS": 0,
                "tamanhoArray": 1999,
                "nome": "CombSort Sem Otimização"
            }
            ];
            $('#example').DataTable({
                "aaData": json,
                "aoColumns": [
                    { "mDataProp": "tempoNS" },
                    { "mDataProp": "tempoMS" },
                    { "mDataProp": "tamanhoArray" },
                     { "mDataProp": "nome" }
                ],
            });
        });

    </script>
</body>
</html>