Best way manipulate data in json array get server side using client side

 <script type="text/javascript">
        $(document).ready(function () { });
        function onCustomerClick() {
            $("#CustomerDetails").html('');
            $("#CustomerDetails").append('<table widht="100%" id="newTable"  cellpadding="5">' +
            '<tr><th>&nbsp;</th><th>&nbsp;</th><th>CustomerCode</th><th>Customer Name</th><th>Name On Card</th><th>Created Date</th><th>&nbsp;</th></tr>');
            var optionHTML = '';
            optionHTML += '<select>';
            $.ajax({
                type: "post",
                url: "LargeDataPageLoad.aspx/LoadHugeData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $.each(response, function (key, value) {

                        var json_data = JSON.parse(value);
                        console.log();
                        for (var index = 0; index < json_data.dt.length; index++) {

                            var selectId = "select_" + index;
                            var d = new Date(json_data.dt[index]["CreatedDate"]);
                            $("#newTable").append('<tr><td>' + (index + 1) + '</td><td><input type="checkbox" onchange="enableDropdown(this,' + selectId + ')" id="chk_' + index + '"/></td><td>' + json_data.dt[index]["CustomerCode"] + '</td><td>'
                                                     + json_data.dt[index]["NameOnCard"] + '</td><td>'
                                                     + json_data.dt[index]["CustomerName"] + '  <td>' + d.toLocaleDateString()
                                                     + '</td><td id="td_' + index + '"></td></tr>'

                                               );

                            { $('#td_' + index).append('<select id="select_' + index + '" disabled="disabled" >'); }
                            for (var option = 0; option < json_data.dtOption.length; option++) {
                                if (option == 0)
                                    $('#select_' + index).append('<option value="-1">-Select-</option>');
                                $('#select_' + index).append('<option  value="' + json_data.dtOption[option]["Value"] + '">' + json_data.dtOption[option]["Name"] + '</option>');

                            }
                            $('#td_' + index).append('</select></td>');
                            //$('#td_' + index).html(optionHTML);
                        }
                        //                        $.each(value, function (key1, value1) {
                        //                            console.log(key1);
                        //                            var json_data = JSON.parse(value1);
                        //                            for (var index = 0; index < json_data.length; index++) {
                        //                                $("#newTable").append('<tr><td>' + json_data[index]["CustomerCode"] + '</td><td>'
                        //                             + json_data[index]["NameOnCard"] + '</td><td>'
                        //                             + json_data[index]["CustomerName"] + '</td>'

                        //                           );
                        //                            }

                        //                        });

                    });
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            });

            $("#CustomerDetails").append('</table>');
        }
        var array = [];

        function enableDropdown(value, ddlValue) {

            var ddlId = '#' + ddlValue.id;
            var splitValue = ddlId.split('_');
            var json_data = { id: parseInt(splitValue[1]) };

            $(ddlId).attr('disabled', !document.getElementById(value.id).checked);
            if (document.getElementById(value.id).checked) {
                array.push(json_data);
              
            } else {
              $.grep(array, function (n, i) {
                 if(typeof n != "undefined")
                if (n.id == parseInt(splitValue[1])) {
                  
                    var index = array.indexOf(array[i]);
                  
                    if (index > -1) {
                        array.splice(index, 1);
                    }
                }
                return array;
            });
            }
            console.log(array);
        }
    </script>

Fetch data using database in JSON form and populated with Dropdown lis

 first of create you asp.net application then attach the database

then create default.aspx page then define your code fetch the data in databse in Json format
using System.Web.Script.Services; using System.Collections.Generic; using System.Web.Script.Serialization; using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Web.Services; using System.Data.SqlClient; [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public static string str() { SqlConnection con = new SqlConnection("XXXXi"); //Your connection string SqlCommand cmd = new SqlCommand("XXXXX", con); // Add your query SqlDataAdapter da = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); da.Fill(ds); List<contact> AddJson = new List<contact>(); string JsonFormat =""; Contact[] contacts ={} ; string[] arrayCreate = { }; loading load = new loading(); for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { AddJson.Add(new Contact { Name = ds.Tables[0].Rows[i]["username"].ToString() }); // AddJson.Add(JsonFormat); } return new JavaScriptSerializer().Serialize(AddJson.ToArray()); } }

then add your aspx page using jquery
<script type="text/javascript"> function getJsonData(){ $.ajax({ type:"Post", url:"default.aspx/GetJson", data: "{}", contentType: "application/json; charset=utf-8", success:function(msg){ var data = eval("(" + msg.d + ")"); var jsonp = msg.d; var lang =''; var obj = $.parseJSON(jsonp); console.log(obj); $.each(obj,function(){ for (var i = 0; i < obj.length; i++){ lang = this['Name']; } $("#username").append("<option>"+lang+"</option>"); }); } }); } </script>


Add  you jquery in header then call in function in body onload then work perfectelly