Populate DropDownList from JSON Array using jQuery AJAX in ASP.Net

Last Reply 3 months ago By dharmendr

Posted 3 months ago

 jason data

[{"Id":"00k25000006mvRrAAI","Product2Id":"01tD000000365O2IAI","ProductCode":"1100 gw","Name":"1100 Litre Bin (General Waste)","Quantity":"60.0","UnitPrice":"1.2","IsActive":null,"Family":"General Waste","Date":null,"Days":null,"Frequency":null,"Estimated_Delivery_Date__c":"\/Date(-62135596800000)\/"},{"Id":"00k25000006m1l3AAA","Product2Id":"01tD0000003OQxNIAW","ProductCode":"skip 14 yard","Name":"14 Yard Skip (General Waste)","Quantity":"2.0","UnitPrice":"25.0","IsActive":null,"Family":"General Waste","Date":null,"Days":null,"Frequency":null,"Estimated_Delivery_Date__c":"\/Date(-62135596800000)\/"},{"Id":"00k25000006m1l5AAA","Product2Id":"01tD0000003POA1IAO","ProductCode":"fel 12 yard","Name":"12 Yard FEL (General Waste)","Quantity":"3.0","UnitPrice":"12.0","IsActive":null,"Family":"General Waste","Date":null,"Days":null,"Frequency":null,"Estimated_Delivery_Date__c":"\/Date(-62135596800000)\/"},{"Id":"00k25000006m1l6AAA","Product2Id":"01tD0000006mzaVIAQ","ProductCode":"skip 12 yard","Name":"12 Yard Skip (Mixed Recycling)","Quantity":"4.0","UnitPrice":"13.0","IsActive":null,"Family":"Mixed Recycling","Date":null,"Days":null,"Frequency":null,"Estimated_Delivery_Date__c":"\/Date(-62135596800000)\/"}]

 

<script type="text/javascript">
    function get_sbu() {
        $.ajax({
            type: "GET",
            url: "/AmendService/productdetails",
            //data: "id=";
            success: 
        });       
    }
</script>

I want to loop through each jason data and to append it in a dropdown like This

1100 Litre Bin (General Waste) (1100 gw)

<option id="@item.Id|@item.Quantity|@item.Family|@item.Name|@item.UnitPrice|@item.ProductCode" value="@item.Name (@item.ProductCode)" />

 

Posted 3 months ago

Hi v@run,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public string GetJsonData()
    {
        NorthwindEntities entities = new NorthwindEntities();
        var products = entities.Products.Take(10).ToList();
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        return serializer.Serialize(products);
    }
}

View

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript">
    function get_sbu() {
        $.ajax({
            type: "POST",
            url: "Home/GetJsonData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var products = response;
                $.each(products, function () {
                    $("[id*=ddlProducts]")
                .append('<option value = "' + this.ProductID + ' | ' + this.SupplierID + ' | ' + this.CategoryID + ' | ' + this.UnitPrice + '">' + this.ProductName + '(' + this.ProductID + ')</option>');
                });
            },
            failure: function (response) { },
            error: function (response) { }
        });
    }
</script>
<input type="button" value="Bind DropDown" onclick="get_sbu()" />
<br />
<select id="ddlProducts" />

Screenshots

The Form

Generated Text and Value