Question

I am new to jQuery. I have to query 2 web services and based on an attribute value in first web service I have to query the next one and populate the result in a table using data from both web services.

Please have a look at the code at http://jsfiddle.net/ykPXZ/2/ . I am trying to append the table data to a div having id=”tableData”. I am getting the data from the web service and I have checked the console logs to see whether the data is getting appended to the variable tableDataA and it is getting appended but I am not to display the data on the web page. Somehow it is getting rewritten or deleted.

Please tell me if this is the best approach for solving this problem. Please suggest a better approach to it.

Thanks.

EDIT: Dynamically generated table is showing 23 rows instead of 24.

Hi, I am following the approach as mentioned by mu is too short in the first answer. The issue I am having now is that instead of getting all the 24 rows to be displayed in the table, it is displaying only 23 rows and missing the 1st row data. When I am logging it in the console, it shows all 24 entries but in the table 23 rows are getting displayed.

Please suggest some solution for the same.

Thanks.

EDIT: I have been able to solve the above issue of showing 23 rows instead of 24. It might be useful for others.In the correct answer below,instead of using the i, it should have been i+1.

     $tr = $('#tableData table tr:eq(' + i + ')');

replace it by

     $tr = $('#tableData table tr:eq(' + (i+1) + ')');

Thanks.

Answer 1

The success callback from your main $.ajax call looks like this:

success: function(data) {
    var tableDataA = '<table border="0" width="500">';
    $.each(data, function(i, detail) {
        $.getJSON("webService2", function(metaData) {
            // ...
        });
    });

    tableDataA = tableDataA + '</table>';
    $('#tableData').empty();
    $('#tableData').append(tableDataA);
}

Each of your $.getJSON calls is asynchronous so the callback functions that build tableDataA won’t be executed until some time after your success callback is finished. That means that when you get to the bottom of the success callback, you’re just doing this:

    $('#tableData').empty();
    $('#tableData').append('<table border="0" width="500"></table>');

and you get an empty table. Later, when the $.getJSON calls finish, they will add some data to tableDataA but it will be too late, no one will care what’s in tableDataA at that point.

You could replace your $.getJSON calls with synchronous $.ajax calls but your users will hate you for it.

You could build the whole empty table in your success callback and then your $.getJSON callbacks would just fill in the blanks with something like this in your success callback:

var tableDataA = '<table border="0" width="500">';
for(var i = 0; i < data.length; ++i)
    tableDataA += '<tr><td></td><td></td><td></td><td></td></tr>';
tableDataA += '</table>';
$('#tableData').empty();
$('#tableData').append(tableDataA);

$.each(data, function(i, detail) {
    $.getJSON('webService2', function(metaData) {
        $tr = $('#tableData table tr:eq(' + i + ')');
        // Fill in the table cells in $tr
    });
});

If possible, it would be better to merge the two services into one that would give you the whole JSON blob that you need in one go. If you don’t have control over the remote systems then the above “fill in the blanks” approach might be the easiest approach.