ajax request in row details - implementation of for loop

ajax request in row details - implementation of for loop

culterculter Posts: 83Questions: 16Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 4,325Questions: 19Answers: 939
    edited October 10

    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

  • culterculter Posts: 83Questions: 16Answers: 0

    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"}

  • kthorngrenkthorngren Posts: 4,325Questions: 19Answers: 939

    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

  • DAustinDAustin Posts: 16Questions: 0Answers: 1

    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
    ]
    
  • culterculter Posts: 83Questions: 16Answers: 0

    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"}
    ]
    
  • DAustinDAustin Posts: 16Questions: 0Answers: 1

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

  • culterculter Posts: 83Questions: 16Answers: 0

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

    Uncaught SyntaxError: Unexpected token .

    on line 20.

  • DAustinDAustin Posts: 16Questions: 0Answers: 1

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

    Comment out line 20 and see what happens

  • kthorngrenkthorngren Posts: 4,325Questions: 19Answers: 939
    Answer ✓

    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

  • culterculter Posts: 83Questions: 16Answers: 0

    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!

Sign In or Register to comment.