ajax request in row details - implementation of for loop

culter

Hi guys, I'm trying to create row details in server-side processing DataTable with this tutorial: https://datatables.net/blog/2017-03-31. It's working fine, but I have problem with implementing for loop. I slightly modified the ajax call to this

function format ( rowData ) {
    var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );

    $.ajax( {
        url: 'scripts/details.php',
        data: {
            name: rowData[0]
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {

            console.log(json);
            div
               .html = ( '<table><thead><tr><td>TIME</td><td>DESC</td></tr></thead><tbody>')
//              for(var i=0;i<json.length;i++){
//                      '<tr><td>' + json[i].TIME + '</td><td>' + json[i].DESC + '</td></tr>' + }
                .html('<tr><td>AA</td><td>BB</td></tr></tbody></table>')
                '</tbody></table>'
                )
                .removeClass( 'loading' );
        }
    } );

    return div;
}

but the for loop (commented) won't work. Do you know how to make the for loop work? Thank you

kthorngren

I think the problem is that the json variable is a JSON string not a Javascript array. You probably need to use JSON.parse(), for example:
json = JSON.parse(json);

Put it before the console.log() statement,

Kevin

culter

Hi Kevin, I have no problem with showing this:

'<tr><td>' + json[0].TIME + '</td><td>' + json[0].DESC + '</td></tr>' +

I think I have similar problem as this one https://stackoverflow.com/questions/24499938/uncaught-syntaxerror-unexpected-token-for

I tried to make it with variables, but it won't work without this ".html"

I added the console.log(json); after function ( json ) and I get this in the browser's console:

{TIME: "2015-05-14 03:48:44", DESC: "ok"}

kthorngren

If {TIME: "2015-05-14 03:48:44", DESC: "ok"} is all you are getting then that is not an array. Accessing it with json.TIME and json.DESC should be all that is needed. A for loop would not be needed in this case.

If you are expecting an array with one or more TIME and DESC then your server script will need to return an array.

Kevin

DAustin

Are you expecting more than one set of results here?

{TIME: "2015-05-14 03:48:44", DESC: "ok"}

This is an object, not an array, your loop is looking for a json array like this:

[
    {TIME: "2015-05-14 03:48:44", DESC: "ok"},  //json[0]
    {TIME: "2015-05-14 03:48:44", DESC: "ok"},  //json[1]
    {TIME: "2015-05-14 03:48:44", DESC: "ok"}   //json[2] and so on
]

culter

Yes, guys, I expect one or more than one objects. Sorry for wrong example. In some cases, there is only one object, in others there is something like this:

[
    {"TIME":"2015-05-24 02:48:41","DESC":"ok"},
    {"TIME":"2016-06-24 20:55:13","DESC":"ok"}
]

DAustin

What error is the console reporting when this fails on you?

culter

When I uncomment the two lines 18 and 19, the console gives this error:

Uncaught SyntaxError: Unexpected token .

on line 20.

DAustin

Ah I see now, your call to .html on line 20 is not valid.

Comment out line 20 and see what happens

kthorngren

The problem has to do with how you are handling the strings. In the loop you need to append each row to a variable.

Try something like this:

        success: function ( json ) {
 
            console.log(json);
            var childTable = '<table><thead><tr><td>TIME</td><td>DESC</td></tr></thead><tbody>';

              for(var i=0;i<json.length;i++){
                      childTable = childTable.concat('<tr><td>' + json[i].TIME + '</td><td>' + json[i].DESC + '</td></tr>');
              }
             
             childTable = childTable.contact('<tr><td>AA</td><td>BB</td></tr></tbody></table>');

            div
               .html( childTable );
                .removeClass( 'loading' );
        }

Haven't tested it but it should be close hopefully.

Kevin

culter

Thank you very much, guys.

DAustin, after commenting line 20, there is the same error on line 23. But it doesn't matter, because Kevin's solution is working perfectly!! Thanks again Kevin!