jQuery nested $.getJSON not working

Question

Hi guys,

I am trying to retrieve some data from a database using jQuery's $.getJSON method to display in a table, but for each user who's info I get, I have to get the many related systems related to that user, which requires a second $.getJSON call nested in the first, which I have tried turning into a function, which seems to be working, but I am unsure of how to append the system data to the td once it's looped through all of the systems, here is the code...

jQuery:

function systems(id){
//here I try to get the bunch of suppliers and loop through them so that all of them display in the one <td>
    $.getJSON("get_systems.php", {uid:id}, function(data){

       $.each(data, function(i, json){
            return json.supplier_id;
        });

    });
};

//on submit get the province and city values, send it to the search_results.php file to get the users, then call the systems() function to display each users systems
$('#submit').click(function(){
    var province_val = $('[data-custom="province"]').val();
    var city_val = $('[data-custom="city"]').val();

    $.getJSON('search_results.php', { province: province_val, city: city_val }, function(data){

        var check = $(data).size();

        if(check == 0){
            alert("No entries were found");
        }else{
            $('#table').html('');
            $.each(data, function(i, json){
                $('#table').append('<tr><td>'+json.company_name+'</td><td>'+json.contact_number+'</td><td>'+json.email_address+'</td><td>'+systems(json.id)+'</td></tr>')                     
            });
        }
    });
});

I think the code is pretty self explanatory, if there is anything else you would like to know please gimme a shout.

Thanx in advance!

Answer 1

You should use an id attribute to the td elements that will hold the results from the second calls, and target them with that..

so your first populating should be

$.each(data, function(i, json){
                $('#table').append('<tr><td>'+json.company_name+'</td><td>'+json.contact_number+'</td><td>'+json.email_address+'</td><td id="system_'+i+'"></td></tr>');
                systems('system_'+i, json.id);                
            });

and you system function

function systems(dom_id, id){
//here I try to get the bunch of suppliers and loop through them so that all of them display in the one <td>
    $.getJSON("get_systems.php", {uid:id}, function(data){

       $.each(data, function(i, json){
            $('#'+dom_id).append(json.supplier_id);
        });

    });
};