Use JSON variable in dynamic Select Element

Question

I have this JSON string (coming out of a DataSet, 1 column, a few rows -showing just 2 for the example-)

{"Tables":[{"Rows":[{"Column1":"UserNumer1"},{"Column1":"UserNumber2"}]}]}

How can I use those values in my dynamically populated select value?

$('<option>').val('UserNumer1').text('UserNumer1').appendTo('#selectID');

I want to append all values, if JSON string has 10 rows (users in this case) I'd like the jquery to append to my selectID all of the rows. Was told it's better to appendTo just once instead of doing an interation.

Thanks!

EDIT based on Answer.

For quick testing purposes I set on my Page Load this.

jsonString = GetParsedData();

Now, the jQuery script.

$(function () {
        var obj = <%=jsonString%>;
        var html = "";
        for (var i = 0; i < obj.Tables.length; i++) {
            html += '<option value="' + obj.Tables[i].Column1 + '"> ' + obj.Tables[i].Column1 + '</option>';
        }
        $(html).appendTo('#selectID');
    });

The list is not getting populated, so I tried firebug, and after a breakpoint I get this result for the variable html

"<option value="undefined"> undefined</option>"

the var obj is OK

{"Tables":[{"Rows":[{"Column1":"UserName1"},{"Column1":"UserName2"}]}]};

Am I missing something here? Thanks a lot.

Besides de "undefined" which is wrong, it's not even appending it. Menus list y empty.

Anoop · Accepted Answer · 2012-11-04 15:57:14Z

3

 var table;   for (var i=0; i< resp.Tables.length; i++){
     table = resp.Tables[i];
     for(var j=0;j<table.Rows.length; j++ ){
          $('<option>').val( table.Rows[j].Column1).text(table.Rows[j].Column1).appendTo('#selectID');
    }
    }

I suggest you faster way.

var html = "";
    for (var i=0; i< resp.Tables.length; i++){
    table = resp.Tables[i];
     for(var j=0;j<table.Rows.length; j++ ){
         html +='<option value="'+  table.Rows[j].Column1 +'"> '+  table.Rows[j].Column1 +'</option>';
    }
    }
$(html).appendTo('#selectID');

edited Nov 4, 2012 at 15:57

answered Nov 4, 2012 at 14:42

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

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

3 Comments

Anoop Over a year ago

You changed the format of JSON object. I modifiied my code accordingly.

Daniel Sh. Over a year ago

Not working. After your edit, now html is totally empty. And the JSON object (var obj here) was never modified. I copied and pasted your code, changed resp for obj and no, no working. Any clue?

Daniel Sh. Over a year ago

Done! you were right about the JSON, my bad. Great work, thanks a lot.

Collectives™ on Stack Overflow

Use JSON variable in dynamic Select Element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related