How to get JSON result from an API call using jQuery(or Javascript) in a non-Ajax way?

Question

I am new to JS an jQuery. And I am trying to build a key-value map from an API call which returns an array of key-value pairs.

[{"key":"191","value":244}, ... , {"key":"920","value":130}]

I came up with this ajax code. But following code will need the map constructed from loadMap. How to change it to non-ajax way that the "followingFunction" runs after loadMap finishes>

var mp = {};
(function loadMap() {
    $.ajax({
        type: 'GET',
        url:'http://localhost:8080/xxx/api?start_date=2014-10-01&end_date=2014-11-01',
        dataType: "json",
        success: function(arr){
            var out = "";
            for(i = 0; i<arr.length; i++) {
                mp[arr[i].key] = arr[i].value;
            }
        }
    }); 
}());

//followingFunction which needs the information from mp

Any reason you don't just use followingFunction in the success callback? — peterdotjs
– peterdotjs, Commented Mar 8, 2015 at 5:06
Thx for reply! I tried this but somehow doesn't work. And there are lots of stuff following, it seems ugly to put all those in success. — user3692521
– user3692521, Commented Mar 8, 2015 at 5:12
answer below - you can use the async flag. it is by default set to true - just set it to false and it will be a blocking call. — peterdotjs
– peterdotjs, Commented Mar 8, 2015 at 5:14

peterdotjs · Accepted Answer · 2015-03-08 05:15:09Z

You can solve this in two different ways.

1) ExecutefollowingFunctionat the end of your success callback:

var mp = {};
function loadMap() {
    $.ajax({
        type: 'GET',
        url:'http://localhost:8080/xxx/api?start_date=2014-10-01&end_date=2014-11-01',
        dataType: "json",
        success: function(arr){
            var out = "";
            for(i = 0; i<arr.length; i++) {
                mp[arr[i].key] = arr[i].value;
            }
            followingFunction();
        }
    });
};
loadMap();

2) Set the async flag to false (by default this flag is true). This will result in blocking call with synchronous execution:

var mp = {};
function loadMap() {
    $.ajax({
        type: 'GET',
        url:'http://localhost:8080/xxx/api?start_date=2014-10-01&end_date=2014-11-01',
        dataType: "json",
        async: false,
        success: function(arr){
            var out = "";
            for(i = 0; i<arr.length; i++) {
                mp[arr[i].key] = arr[i].value;
            }
        }
    });
};
loadMap();
followingFunction();

Collectives™ on Stack Overflow

How to get JSON result from an API call using jQuery(or Javascript) in a non-Ajax way?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related