Bind JSON value to dropdown using AJAX

Question

I'm trying to bind a drop down using .json file.

My ActionMethod:

 public JsonResult LoadDropdown()
    {
        using (StreamReader sr = new StreamReader(Server.MapPath("~/Scripts/Drop1.json")))
        {
            var users = JsonConvert.DeserializeObject<List<Item>>(sr.ReadToEnd());
            return Json(users, JsonRequestBehavior.AllowGet);
        }

    }

My AJAX:

$.ajax({
        type: "GET",
        url: "/Home/LoadDropdown",            
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var ddlCustomers = $("[id*=drop1]");
            ddlCustomers.empty().append('<option selected="selected" value="0">--Please select--</option>');
            //alert(data.d);
            $.each(data.d, function () {
                ddlCustomers.append($("<option></option>").val(this['id']).html(this['name']));
            });                
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(textStatus + "_" + errorThrown);
        }
    });

My action method returns the following JSON Objects,

Now in Ajax I'm getting 'Undefined' when I checked 'data.d' before loop. Also 'data' holding objects like - [object]. Can anyone please help me what is the mistake?

Its just $.each(data, function (index, item) { ddlCustomers.append($("<option></option>").val(item.id).text(... — user3559349
– user3559349, Commented May 26, 2016 at 5:43

madalinivascu · Accepted Answer · 2016-05-26 05:57:54Z

3

Try the following:

$.each(data, function (i,v) {
     ddlCustomers.append($("<option</option>",{value:v.id,text:v.name});
});

edited May 26, 2016 at 5:57

answered May 26, 2016 at 5:56

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3559349 Over a year ago

Its data, not data.d

Sumit Chaudhary · Accepted Answer · 2018-03-14 10:16:55Z

My Action Mathod

            DataTable dt = ds.Tables[0];
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
            Dictionary<string, object> row;
            foreach (DataRow dr in dt.Rows)
            {
                row = new Dictionary<string, object>();
                foreach (DataColumn col in dt.Columns)
                {
                    row.Add(col.ColumnName, dr[col]);
                }
                rows.Add(row);
            }
            return serializer.Serialize(rows);

AJAX

            $.ajax({
            type: "POST",
            url: "GMCAddEditProduct.aspx/GetDropDownValue",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                $("#ContentPlaceHolder1_ddlprotype").empty().append('<option selected="selected" value="0">--Select Product--</option>');
                $.each(JSON.parse(response.d), function (i, v) {
                    $("#ContentPlaceHolder1_ddlprotype").append($("<option></option>", { value: v.ProductTypeID, text: v.Name }))
                });
              },
        });

Collectives™ on Stack Overflow

Bind JSON value to dropdown using AJAX

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related