JavaScript Array of objects to a dropdown

Question

I have an array of objects which was fetched from a JSON (JSONP) file using jQuery.

I'm required to display this data using an HTML dropdown.

Current code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript'>
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){

    console.log(data);


    })
</script>

How do I put this data variable which is array of objects to be displayed using HTML drop-down?

object array looks like this

Object
 lines: Array[10]
0: Object
   line: "COLOMBO - BADULLA"
 1: Object
 2: Object
 3: Object
 4: Object
 5: Object
 6: Object
 7: Object

JSON File

( {"lines":[{"line":"COLOMBO - BADULLA"},{"line":"COLOMBO - MATALE"},{"line":"COLOMBO - PUTTLAM"},{"line":"COLOMBO - THANDIKULAM"},{"line":"COLOMBO - TALAIMANNAR"},{"line":"COLOMBO - BATTICALOA"},{"line":"COLOMBO - TRINCOMALEE"},{"line":"COLOMBO - MATARA"},{"line":"COLOMBO - AVISSAWELLA"},{"line":"COLOMBO - MIHINTALE"}]} );

score 3 · Accepted Answer · 2011-07-06 12:48:15Z

3

This should work:

$(document).ready(function() {
    var oDDL = $("<select>");
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data) {
        $.each(data.lines, function(i, item) {
            oDDL.append('<option>' + item.line + '</option>');
        });
    });
    $("body").append(oDDL);
});

As you can see, it's building drop down list object and appending options to it for every item in the JSON array.

Note: Each JSON response is different, the data.lines and item.line match the JSON format of this specific case only.

edited Jul 6, 2011 at 12:48

answered Jul 6, 2011 at 8:38

user447356

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

7 Comments

user447356 Over a year ago

What exactly remote-json-proxy.php is returning? Can you post example?

Sudantha Over a year ago

hi i have updated the question with details check it , thanks :-)

user447356 Over a year ago

Try changing data.items to be data.lines then.

Sudantha Over a year ago

what should i give here ? oDDL.append('<option>' + item.d.title + '</option>'); for title ?

user447356 Over a year ago

Change item.d.title to just item.line or item.d.line I'm not sure how exactly JSON works in this context..

|

Edgar Villegas Alvarado · Accepted Answer · 2011-07-06 08:42:09Z

1

You'd first have to create a element in your html if you don't have one:

<select id='myselect'></select>

Then, in your js, assuming you have properties .value y .caption per item you would do:

$.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){
    for(var i=0; i<data.length; i++){ //Traverse the data array
       var value = data[i].value;
       var text = data[i].caption;
       $('<option/>').val(value).text(text).appendTo('#myselect');
    };
});

Just that. Hope this helps. Cheers

answered Jul 6, 2011 at 8:42

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Collectives™ on Stack Overflow

JavaScript Array of objects to a dropdown

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related