Bind json variable data to the dropdownlist from jquery

Question

In my asp.net web page, I have prepared the JSon string with the help of JavaScriptSerializer class. And i have spit the Json string in to the HTML markup with the help of RegisterStartupScript method and it looks like this,

C#.net code to prepare the json string,

System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();

List<Dictionary<string, string>> glAccts = new List<Dictionary<string, string>>();
Dictionary<string, string> row;

foreach (DataRow dr in _dtProfitCenterRawData.Rows)
{
    row = new Dictionary<string, string>();
    row.Add(dr[0].ToString(), dr[1].ToString());
    glAccts.Add(row);
}

string jsonObj = jsSerializer.Serialize(glAccts);
string script = "var glList = " + jsonObj + ";";

ClientScriptManager cs = Page.ClientScript; 
cs.RegisterStartupScript(Page.GetType(), "JSONObj", script, true);

The glList variable on the client html looks like this,

var glList = [
    { "1110005": "1110005 - X1" },
    { "1110008": "1110008 - X2" },
    { "1110011": "1110011 - X3" },
    { "1110020": "1110020 - X4" }
];

I want to bind this json string to dropdownlist control. Please suggest how to perform that? I tried to perform the following action to view the data inside the object, but it does not give me the real values. It gives [object] in the alert methods.

Please suggest the fix to the problem..

$.each(glList, function (val, text) {
    //$('#mySelect').append(new Option(text, val));
    alert(text); alert(val);                 
});

possible duplicate of [What is the best way to add options to a select from an array with jQuery?](http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery) — Jono, Jun 19 '14 at 09:49
Yeh, i tried but it is not working for me.. Do i need to remove the [, ] brackets from the variable glList ?? — Karan, Jun 19 '14 at 09:51
The only difference between their JSON data and yours is they have a object of {"key1":"value", "key2":"value", "key3":"value"}, whereas you have a list of [{"key":"value"},{"key":"value"},{"key":"value"}] — Jono, Jun 19 '14 at 09:54
Any idea, how do i prepare the json style data from c#.net.. Can i fix the problem in my c# code.. — Karan, Jun 19 '14 at 09:57

score 2 · Accepted Answer · answered Jun 19 '14 at 10:43

Try this here. If you itereate through glList you get the objects but not their properties.

function jsonTest() {
    $.each(glList, function(index, obj) {
        ($.each(obj, function (key, value) {
            $('#mySelect').append(new Option(key, value));
        }));
    });
}

score 0 · Answer 2 · answered Jun 19 '14 at 10:00

0

Use JSON.Net instead JavaScriptSerializer to serialize a Dictionnary.

Or you can try to cast to object before serialize

jsSerializer.Serialize((object)glAccts)

answered Jun 19 '14 at 10:00

User.Anonymous

1,719
1
28
51

I tried this , but there is no difference in the output. I cant use JSon.NET library at this moment now.. – Karan Jun 19 '14 at 10:15

score 0 · Answer 3 · answered Jun 19 '14 at 10:27

0

try

 var glList = [
        { 1110005: "1110005 - X1" },
        { 1110008: "1110008 - X2" },
        { 1110011: "1110011 - X3" },
        { 1110020: "1110020 - X4" }
    ];

answered Jun 19 '14 at 10:27

stefano

16
1

Bind json variable data to the dropdownlist from jquery

3 Answers3