title: Architecture for Multiple API Calls Using jQuery and Javascript
body: <p>Curious about what others see as the best way to architect making an API call that depends on the response of another API call in jQuery.</p>
  
  <p>Steps:</p>
  
  <ol>
  <li>Make an API JSONP call to an endpoint, receive response</li>
  <li>If we get a 200 success response from the first call, we would trigger another API call (JSON this time). </li>
  <li>Output results into browser.</li>
  </ol>
  
  <p>This is how I would construct it with some crude error handling:</p>
  
  <pre><code>$(document).ready(function() {
    $.ajax({
       url: "http://example.com/json",
       type: 'POST',
       dataType: 'jsonp',
       timeout: 3000,
       success: function(data) {
  
         // Variables created from response
         var userLocation = data.loc;
         var userRegion = data.city;
  
         // Using variables for another call
         $.ajax({
           url: "http://example2.com/json?Location=" + userLocation + "&amp;City=" + userRegion,
           type: 'POST',
           dataType: 'json',
           timeout: 3000,
           success: function(Response) {
            $(.target-div).html(Response.payload);
           },
           error: {
            alert("Your second API call blew it.");
           }
         });
  
       },
       error: function () {
         alert("Your first API call blew it.");
       }
    });
  });
  </code></pre>