web-dev-qa-db-fra.com

Remplir des tables de données avec un tableau JSON à partir d'une requête GET

Je sais qu'il y a eu beaucoup de réponses et de tutoriels sur le remplissage de Jquery Datatables avec des données, mais j'arrive toujours au point d'obtenir l'exception suivante:

Uncaught TypeError: Impossible de lire la propriété 'longueur' de non définie

Étant principalement un développeur backend, je n’ai que peu d’expérience dans la rédaction de client. Je voudrais donc vous demander ce que je fais de mal dans l’exemple suivant.

J'ai un serveur en cours d'exécution localement qui expose un noeud final /destination qui répond par une chaîne JSON au format suivant:

[{
    "id": 1,
    "name": "London Heathrow",
    "lat": 51.470022,
    "lon": -0.454295
}, {
    "id": 2,
    "name": "London Gatwick",
    "lat": 51.153662,
    "lon": -0.182063
}, {
    "id": 3,
    "name": "Brussels Airport",
    "lat": 50.900999,
    "lon": 4.485574
}, {
    "id": 4,
    "name": "Moscow Vnukovo",
    "lat": 55.601099,
    "lon": 37.266456
}]

Je voudrais afficher ces données dans un tableau en utilisant le plugin Datatables. C'est le code de la table:

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
             <th>ID</th>
             <th>Name</th>
             <th>Lattitude</th>
             <th>Longitude</th>
         </tr>
        </thead>
 </table>

Et script pour le peupler:

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : ".../destination",
            "type" : "GET"
        },
        "columns" : [ {
            "data" : "id"
        }, {
            "data" : "name"
        }, {
            "data" : "lat"
        }, {
            "data" : "lon"
        }]
    });
});

Comme spécifié ci-dessus, je reçois le Uncaught TypeError: Cannot read property 'length' of undefined. Toute aide est appréciée.

EDIT: Cela fonctionne si je fais une demande pour les données et puis passe les données aux datatables comme suit:

$.ajax({
            url : '/AOS-project/destination',
            type : 'GET',
            dataType : 'json',
            success : function(data) {
                assignToEventsColumns(data);
            }
        });

        function assignToEventsColumns(data) {
            var table = $('#example').dataTable({
                "bAutoWidth" : false,
                "aaData" : data,
                "columns" : [ {
                    "data" : "id"
                }, {
                    "data" : "name"
                }, {
                    "data" : "lat"
                }, {
                    "data" : "lon"
                } ]
            })
        }

Je m'attendais à ce que les tables de données intègrent cette fonctionnalité ...

javascriptjqueryjsondatatable
6
Smajl

Définissez dataSrc sur ''. Comme le dit la documentation :

Obtenez des données JSON à partir d'un fichier via Ajax, en utilisant dataSrcpour lire les données d'un tableau Brutplutôt que d'un tableau dans un objet:

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : "https://api.myjson.com/bins/14t4g",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "id"
        }, {
            "data" : "name"
        }, {
            "data" : "lat"
        }, {
            "data" : "lon"
        }]
    });
});

et votre code fonctionne ->http://jsfiddle.net/nzn5m6vL/

11
davidkonrad

Si vous utilisez du code dur avec json, essayez-le

$(document).ready(function() {
    $('#example').DataTable({
        processing : true,
        ajax: {
                url: "/api/venues",
                "type" : "GET"
                dataSrc: function (json) {
                    var obj = JSON.parse(json);
                    console.log(obj);
                    return obj;
                 }
            },
        columns : [ {
            data : "id"
        }, {
            data : "name"
        }, {
            data : "lat"
        }, {
            data : "lon"
        }]
    });
});
0
Shailendra Sharma