title: jquery json populate table
body: <p>I am trying to populate a table with jQuery, but I'm getting caught out by Ajax's asychronisity and not sure how to work it so that things happen in order. There is a main loop over provisioning id's. For each loop I do a JSON call and population of pre-created table. But it seems like the initial loop ticks over before the JSON stuff is done.</p>
  
  <pre><code>function getEntityListingsForProvisioning(oArg) {
      var user_id = oArg.user_id || parseInt(0) //zero gets nothing
      var entity = oArg.entity || "products";
      var provisioning_id_list = oArg.provisioning_id;
      var detailLinkClass = oArg.detailLinkClass || "productDetailLink"
      var retDiv = oArg.retDiv || "divResult"
  
      var provIdArray = provisioning_id_list.split(","); // e.g. ['39', '40']
  
      $("#" + retDiv).fadeIn('slow').html('');
  
          // create a table; we'll populate the rows later
  
      var x = "&lt;table&gt;&lt;tr&gt;";
      for(var i=0; i&lt;provIdArray.length; i++) {
          provid = provIdArray[i];
          x += "&lt;td id='td_" + provid + "'&gt;"; 
          x += "&lt;table class='searchPod' border='0' cellspacing='0' cellpadding='2' id='tbl_" + provid + "'&gt;";
          x += "&lt;/table&gt;&lt;/td&gt;";
      }
      x += "&lt;/tr&gt;&lt;/table&gt;";
      $("#" + retDiv).html(x)
  
  
      //loop through provisioning id's and get same list of products for each
  
      for(var j=0; j&lt;provIdArray.length; j++) {
          var y = '';
          provisioning_id = provIdArray[j];
  
      // get JSON recordset. PROBLEM. I think this isn't getting finished before the main loop ticks over again.
          $.getJSON("/cfcs/main.cfc?method=getProductListings&amp;returnformat=json&amp;queryformat=column", {"user_id":user_id,"short":true}, function(res,code) {
              var v_listing_class = "listingCaption";
              var v_object_type = "ajax";
              var v_onclick = 'return hs.htmlExpand(this,{objectType:"ajax"})';
              var listings_noresults = "&lt;div class='messageSuccess'&gt;&lt;b&gt;No records found!&lt;/b&gt;&lt;br&gt;Use the left-hand menu to add new records.&lt;br&gt;You can return here any time by clicking the Edit Provisioning link&lt;/div&gt;";
  
              if(res &amp;&amp; res.ROWCOUNT &gt; 0)
              {
                  for(var k=0; k&lt;res.ROWCOUNT; k++)  
                  {                   
                      y += "&lt;tr&gt;"
                      y += "&lt;td style='width:10px' valign='middle'&gt;&lt;input type='button' value='Use' class='btnSelProduct' id='" + provisioning_id + "^" + res.DATA.RECORD_ID[k] + "^" + entity + "^" + "'&gt;&lt;/td&gt;"
                      y += "&lt;td style='width:70px' valign='middle'&gt;"
                      y += "&lt;img id='img_" + res.DATA.RECORD_ID[k] + "' src='http://localhost/chinabuy-new/images/website/users/products/images/" + res.DATA.USER_ID[k] + "/" + res.DATA.RECORD_ID[k] + "/" + res.DATA.IMAGE1[k] + "' width='58' height='40'&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;" 
                      y += "&lt;/td&gt;"
                      y += "&lt;td&gt;"
                      y += "&lt;span class='listingText'&gt;" + res.DATA.PRODUCT_NAME[k] + "&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;"
                      y += "&lt;span class='listingText'&gt;" + res.DATA.MODEL_NUMBER[k] + "&lt;/span&gt;"
                      y += "&lt;/td&gt;&lt;/tr&gt;"
                      $("#tbl_" + provisioning_id).html(y);
                  }
              }
          })
      }
  
  }
  </code></pre>