Populate a Select HTML element from JSON parsed object array

Question

I have the following JSON data and I want to populate an html select element from it, please I don't see how to use a for each loop with such a json data. Thanks.

//JSON

[{
    "group": "US (Common)",
    "zones": [{
        "value": "America/Puerto_Rico",
        "name": "Puerto Rico (Atlantic)"
    }, {
        "value": "Pacific/Honolulu",
        "name": "Honolulu (Hawaii)"
    }]
}, {
    "group": "Africa",
    "zones": [{
        "value": "Africa/Tunis",
        "name": "Tunis"
    }, {
        "value": "Africa/Windhoek",
        "name": "Windhoek"
    }]
}]

and the html select element looks like :

<select id="timeZones"></select>

and this is JS code that is not working :

var $select = $('#timeZones');
$.ajax({
    url: 'timezones.json',
    dataType: 'JSON',
    success: function (data) {
        $.each(data, function (i, val) {
            $select.append('<OPTGROUP LABEL="' + val[i].group + '"><OPTION VALUE="' + val[i].zone[i].value + '">' + val[i].zone[i].name + '</OPTION></OPTGROUP>');
        })
    },
    error: function () {
        alert("JSON ERROR");
    }
});

Where are you getting the json data from? Or what web framework are you using? — tier1
– tier1, Commented Oct 31, 2012 at 16:38

Jay Rizzi · Accepted Answer · 2012-10-31 18:26:35Z

2

Its easier to do two each functions on nested nodes

 success: function (data) {
    $.each(data, function (i, val) {
        bar = '<OPTGROUP LABEL="' + val.group + '">';      
        $.each(val.zones, function(zoneID,zoneData) {
            bar += '<OPTION VALUE="' + zoneData.value + '">' + zoneData.name + '</OPTION>';  
        });
        bar += '</OPTGROUP>';
        $('#timeZones').append(bar);
   });    

}

here is a jsfiddle of the working solution http://jsfiddle.net/hZsQS/132/

However you may want to look at things like jsrender for templating

edited Oct 31, 2012 at 18:26

answered Oct 31, 2012 at 17:59

Jay Rizzi

4,3046 gold badges45 silver badges73 bronze badges

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

3 Comments

OussamaLord Over a year ago

Hi, Thanks for the answer but It did not work, my select element is still empty, I tried some debug by doing as following: var $select = $('#timeZones'); $.ajax({ url: 'timezones.json', dataType:'JSON', success: function (data) { $.each(data, function (i, val) { alert(val.group); }); }, error:function(){ alert("JSON ERROR"); } });

Jay Rizzi Over a year ago

i just fixed the syntax AGAIN (extra double quote in front of LABEL), sorry bout that, included a jsfiddle just to verify its up to snuff

Jay Rizzi Over a year ago

really, really OFF day, everything is now fixed in the answer

Marcus · Accepted Answer · 2012-10-31 16:48:16Z

0

It looks like you'll have to have nested $.each loops; one to loop through the groups and add the <optgroup>, and the inner loop to loop through the zones and add each <option> to the appropriate <optgroup>.

answered Oct 31, 2012 at 16:48

Marcus

5,4873 gold badges36 silver badges54 bronze badges

Comments

derlinuxer · Accepted Answer · 2012-10-31 17:52:42Z

0

You can use Knockout Framework to map an json String to a select box (very less code).

example: JavaScript:

var json = '{"showFilter":["notStarted","running"],"whatEver":["one","two"]}';
  var model = ko.mapping.fromJSON(json);
  ko.applyBindings(model);

HTML:

<p>Filter: <select data-bind="options: showFilter"></select></p>
<p>WhatEver: <select data-bind="options: whatEver"></select></p>

see also: http://knockoutjs.com/documentation/options-binding.html

edited Oct 31, 2012 at 17:52

answered Oct 31, 2012 at 17:47

derlinuxer

5741 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

Populate a Select HTML element from JSON parsed object array

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related