Convert Array to Object - JQuery

Question

Trying to bind a list of objects to a dropdownlist, after PageLoad. Step 2 works fine and I get the data. I'm stuck at step 1 and 3.

sCountry is the id of the dropdownlist.

Assuming step 3 is correct, now what should be done in the 'success' part of step 1.

STEP 1 - JS : //Store data in a global object, so that it can be retrieved multiple times.

var GlobalObjects = { Countries: null,

    GetCountries: function () {

        if (GlobalObjects.Countries == null) {            

            $.ajax({
                type: "POST",
                url: "default.aspx/CountriesData",
                data: "{}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (res) {
                    //What should be done here
                },
                failure: function (res) {
                    alert(res.message);
                }
            });
        }
        return GlobalObjects.Countries;
    }
};

STEP 2 - CS : //Get the data

[WebMethod]    
        public static CountryDAL[] CountriesData()    
        {    
            CountryDAL cDAL = new CountryDAL();    
            DataTable dt = cDAL.getdata();    
            List<CountryDAL> lst = new List<CountryDAL>();               

                foreach (DataRow dr in dt.Rows)    
                {    
                    CountryDAL obj = new CountryDAL();
                    obj.CountryId = Convert.ToInt32(dr["CountryId"]);
                    obj.CountryName = Convert.ToString(dr["CountryName"]);  

                    lst.Add(obj);    
                }
        return lst.ToArray();
        }

STEP 3 - JS : // Bind records to dropdownlist at page load

$(document).ready(function () {

    //Load Countries
    var opt = [];
    opt.push("<option value='0'>--Select--</option>");
    $(GlobalObjects.GetCountries()).each(function (key, value) {
        opt.push("<option value=" + value.CountryId + ">" + value.CountryName + 
        "</option>");

    });

    $("#sCountry").html(opt.join(''));
});

Please see http://stackoverflow.com/questions/4215737/convert-array-to-object — Rohit Batham, May 08 '14 at 09:03
Also check fiddle with different way http://jsfiddle.net/rohitbatham/ZsGpS/11/ — Rohit Batham, May 08 '14 at 09:04
AJAX is asynchronous. Your Step 1 won't work because you can't return the array immediately if it won't be filled in until the AJAX call completes. — Barmar, May 08 '14 at 09:06
See http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Barmar, May 08 '14 at 09:06
@Barmar.Sorry I didn't understand. When I say alert(res.d[1].CountryName) in the success part, I see the popup with the name. — Ruby, May 08 '14 at 10:07

paulitto · Answer 1 · 2014-05-08T09:14:47.477

0

You should wait for ajax request before returning value, you can either implement promises object or use synchronuous ajax request in your function, by setting async:false

GetCountries: function () {

    if (GlobalObjects.Countries == null) {            

        $.ajax({
            type: "POST",
            async: false, // async is true by default
            url: "default.aspx/CountriesData",
            data: "{}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (res) {
                GlobalObjects.Countries = res;
            },
            failure: function (res) {
                alert(res.message);
            }
        });
    }
    return GlobalObjects.Countries;
}

edited May 08 '14 at 09:14

answered May 08 '14 at 09:09

paulitto

4,585
2
22
28

I still get the data into 'res' even when async true. I need to store it into some object/Array, so I can perform step 3 – Ruby May 08 '14 at 10:08
yes, but the difference is that when async is true, you will get res only after your function will return result – paulitto May 08 '14 at 12:20

Convert Array to Object - JQuery

1 Answers1