How To Create Html Select Option From Json Hash?

I have a simple JSON code: [{'1':'Name'}, {'2', 'Age'}, {'3','Gender'}] I have a select tag in my HTML: I need a simple way

Solution 1:

Just for kicks here is an answer in pure javascript, also you probably do not need an array for this just a simple object will suffice

<selectname="datas"id="datas"></select><script>

        html = "";
        obj = {
            "1" : "Name",
            "2": "Age",
            "3" : "Gender"
        }
        for(var key in obj) {
            html += "<option value=" + key  + ">" +obj[key] + "</option>"
        }
        document.getElementById("datas").innerHTML = html;

    </script>

Solution 2:

Try this.

//Correct(missing colons) in the array itemsvardata = [{'1':'Name'}, {'2': 'Age'}, {'3': 'Gender'}];

Create option element and then use append method to append them into select element.

var $select = $('#datas');
$.each(data, function(i, val){
    $select.append($('<option />', { value: (i+1), text: val[i+1] }));
});

Demo

Solution 3:

The above answer assumes that the data indexes of the array are in order. What if the data variable would be:

vardata = [ {'23':'Age'}, {'12':'Gender'}, {'3':'Name'}];

So in alphabetical order, but with random id's.

One way I found in solving this is:

$.each(data, function(key, value) {
  var i = Object.keys(value)[0];
  $("select#datas").append( $("<option />").val(i).text(value[i]) );