Problem loading json data in a datatable

Question

Problem loading json data in a datatable

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good afternoon, please support, by inserting the data of a json in php to a datatable does not show me, I have validated and the data if they are loaded in the php but by pulling them to a datatable does not show them.

my getjson.php code

require_once 'dbconfig.php';

$posts = array();
$query = ("SELECT * FROM user");

$stmt = $db_con->prepare($query);
$stmt->execute();

while($row=$stmt->fetch(PDO::FETCH_ASSOC)) {

    $posts['datos'][] = $row;
}

echo json_encode($posts);

This is the script that I have in my index.php pulling with e $ .ajax the data that I have the getjson.php, but I can not get them to be displayed.

 $(document).ready(function(){
    $.ajax({
                url: 'getjson.php',
                dataType: 'json',
            })

    $.each(data.datos, function(i,post){
            var newRow =
            "<tr>"
            +"<td>"+post.login+"</td>"
            +"<td>"+post.email+"</td>"
            +"</tr>";
            $(newRow).appendTo("#json-data tbody");
        });
        $('#json-data').DataTable();
    });

I did some tests replacing the $ .ajax with temporary data and shows them without any problem.

$(document).ready(function(){
 var data = {
    'datos':
    [
        {'login':'si', 'email':'[email protected]'},
        {'login':'si', 'email':'[email protected]'}
    ]
};           

$.each(data.datos, function(i,post){
    var newRow =
      "<tr>"
       +"<td>"+post.login+"</td>"
       +"<td>"+post.email+"</td>"
       +"</tr>";
     $(newRow).appendTo("#json-data tbody");
   });
  $('#json-data').DataTable();
});

Your support indicating that I am wrong to pull and show the data of the getjson.php within the $ .ajax

jquery php json ajax datatable

asked by Carlos 01.10.2017 в 21:14

source

2 answers

0

While your AJAX lamda is being performed, the each is executed because AJAX makes an asynchronous call. One solution would be to put the each within the function success of the function $.ajax :

$.ajax({
    url: 'getjson.php',
    dataType: 'json',
    success: function (datos) {

        $.each(data.datos, function(i,post){
            var newRow =
            "<tr>"
            +"<td>"+post.login+"</td>"
            +"<td>"+post.email+"</td>"
            +"</tr>";
            $(newRow).appendTo("#json-data tbody");
        });

        $('#json-data').DataTable();


    }
});

answered by 01.10.2017 в 22:15

Google Analytics does not collect data from my website error when trying to get file from ftp with php

score 0 · Accepted Answer

The possible error is that it does not handle the response of the request Ajax therefore the variable data does not exist and much less data.datos .

For successful call Ajax it would be convenient to use done (success of the call)

$(function() {
    $.ajax({
        url: 'getjson.php',
        dataType: 'json',
    })
    .done(function(data){
        $.each(data.datos, function(i,post){
            var newRow =
            "<tr>"
            +"<td>"+post.login+"</td>"
            +"<td>"+post.email+"</td>"
            +"</tr>";
            $(newRow).appendTo("#json-data tbody");
        });
    });
    $('#json-data').DataTable();
});

It could also have passed a array configuration to DataTables and that it is responsible for adding the rows directly.

HTML

<table id="json-data">
    <thead>
        <tr>
            <th>Login</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

JS

$(function() {
    $('#json-data').DataTable( {
        "processing": true,
        "ajax": {
          "url": "getjson.php", 
          "dataSrc": "datos" //indice del array retornado
       },
        "columns": [ // Aquí los nombres de las columnas que devuelve PHP
            { "data": "login" },
            { "data": "email" },
        ]
    });
});