Calling a function on ajax success

Question

I have to populate data from SQL to jvectormap, using ajax and httphandler.

I can get the json to populate the jvectormap but I dont know how to pass the data which I got from ajax

$.ajax({
            url: 'CountryRegistrations.ashx',
            type: 'POST',
            success: function (data) {
                var dataC = data;
            },
            error: function (data) {
                alert("Error");
            }
        });

 var countryData = [];
        //for each country, set the code and value
        $.each(dataC.countries, function () {
            countryData[this.Country] = this.Count;
        });
        $( function () {
            //World map by jvectormap
            $('#world-map').vectorMap({
                map: 'world_mill_en',
                backgroundColor: "#fff",
                regionStyle: {
                    initial: {
                        fill: '#e4e4e4',
                        "fill-opacity": 1,
                        stroke: 'none',
                        "stroke-width": 0,
                        "stroke-opacity": 1
                    }
                },
                series: {
                    regions: [{
                            values: countryData,
                            scale: ["#3c8dbc", "#2D79A6"], //['#3E5E6B', '#A6BAC2'],
                            normalizeFunction: 'polynomial'
                        }]
                },
                onRegionLabelShow: function (e, el, code) {
                    var country = $.grep(dataC.countries, function (obj, index) {
                        return obj.Country == code;
                    })[0];
                    if (country != undefined) {
                        el.html(el.html() + ': ' + country.Count + ' new visitors');
                    }
                }
            });
        })

I want to pass dataC from ajax to var CountryData and then to the jvectormap function.

The data I get is in json format

"countries":[{"Country":"AE","Count":5},{"Country":"CH","Count":2},{"Country":"IN","Count":3},{"Country":"PK","Count":3},{"Country":"US","Count":2}]

Answer 1

In your way function you code after ajax call will be called before ajax call completion asi it is asynchronous

you can call function like this:

success: function (data) {
                MyFunction(data);
            }

Your function outside ajax call which will be called:

function MyFunction(data)
{

// do something here


}

in your case:

function MyFunction(data)
{
var countryData = [];
        //for each country, set the code and value
        $.each(data.countries, function () {
            countryData[this.Country] = this.Count;
        });
        $( function () {
            //World map by jvectormap
            $('#world-map').vectorMap({
                map: 'world_mill_en',
                backgroundColor: "#fff",
                regionStyle: {
                    initial: {
                        fill: '#e4e4e4',
                        "fill-opacity": 1,
                        stroke: 'none',
                        "stroke-width": 0,
                        "stroke-opacity": 1
                    }
                },
                series: {
                    regions: [{
                            values: countryData,
                            scale: ["#3c8dbc", "#2D79A6"], //['#3E5E6B', '#A6BAC2'],
                            normalizeFunction: 'polynomial'
                        }]
                },
                onRegionLabelShow: function (e, el, code) {
                    var country = $.grep(dataC.countries, function (obj, index) {
                        return obj.Country == code;
                    })[0];
                    if (country != undefined) {
                        el.html(el.html() + ': ' + country.Count + ' new visitors');
                    }
                }
            });
        })

}

Answer 2

Simply call the function in the ajax call: success: function (data) { countryCall(data); },

founction countryCall(data) {

}