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.

Steps:

1. Make an API JSONP call to an endpoint, receive response
2. If we get a 200 success response from the first call, we would trigger another API call (JSON this time).
3. Output results into browser.

This is how I would construct it with some crude error handling:

$(document).ready(function() {
  $.ajax({
     url: "",
     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: "=" + userLocation + "&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.");
     }
  });
});

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.

Steps:

1. Make an API JSONP call to an endpoint, receive response
2. If we get a 200 success response from the first call, we would trigger another API call (JSON this time).
3. Output results into browser.

This is how I would construct it with some crude error handling:

$(document).ready(function() {
  $.ajax({
     url: "http://example./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./json?Location=" + userLocation + "&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.");
     }
  });
});

• javascript
• jquery
• json
• ajax

• 1 What problems are you encountering? Are you sure the second api needs POST and not GET, you aren't sending any data in post body? – charlietfl Commented Sep 14, 2015 at 12:46
• Good catch - second request should be a GET. Silly mistake on my side but appreciate you taking a look. – serraosays Commented Sep 14, 2015 at 13:26

1 Answer 1

In terms of architecture, you may consider using Promise pattern to decouple each step into one function, each function cares only about it's own task (do not reference to another step in the flow). This gives more flexibility when you need to reuse those steps. These individual step can be chained together later on to form a plete flow.

https://www.promisejs/patterns/

http://api.jquery./jquery.ajax/

http://api.jquery./category/deferred-object/

  function displayPayload(response) {
    $(".target-div").html(response.payload);
  }

  function jsonpCall() {
    return $.ajax({
      url: "http://example./json",
      type: 'GET',
      dataType: 'jsonp',
      timeout: 3000
    });
  }

  function jsonCall(data) {
    // Variables created from response
    var userLocation = data.loc;
    var userRegion = data.city;

    // Using variables for another call
    return $.ajax({
      url: "http://example2./json?Location=" + userLocation + "&City=" + userRegion,
      type: 'GET',
      dataType: 'json',
      timeout: 3000
    });
  }

  $(document).ready(function() {
    jsonpCall()
      .done(function(data) {
        jsonCall(data)
          .done(function(response) {
            displayPayload(response);
          }).fail(function() {
            alert("Your second API call blew it.");
          });
      }).fail(function() {
        alert("Your first API call blew it.");
      });
  });