create drop down list from json

javascript json drop-down-menu

11,488

The JavaScript:

window.onload = function () {
    var JSON = {
        "COLUMNS":["ID", "Name"],
        "DATA": [ 
            ["1","Joe"],
            ["2", "Sam"],
            ["3", "Doug"]
        ]
    }, select = document.getElementById("selector");
    for (var i = 0, at = JSON.DATA[i], id = at[0], name = at[1]; i < JSON.DATA.length; i++) {
        var option = document.createElement("option");
        option.value = id;
        option.textContent = name;
        select.appendChild(option);
    };
};

Please make sure that if your JSON is in string form, that you parse it first using JSON.parse();

The HTML:

<select id="selector"></select>

The JSFiddle Example: http://jsfiddle.net/su7sr/1

11,488

user2533762

I am a student learning software engineering. I am excited about MVC and Android development. Love learning and thankful for all the help I have received during my journey.

Updated on September 16, 2022

Comments

user2533762 over 1 year
I have a json in this form:
```
{"COLUMNS":["ID", "Name"],"DATA":
[ 
  ["1","Joe"],
  ["2", "Sam"],
  ["3", "Doug"],
]
}
```
and I was looking for an example of how to create a drop down list from this data in javascript but all the examples of json/dropdown list the json is in a different format. I haven't worked with javascript much or json data at all so I'm not sure about where to start. Can anyone point me in the direction of a great tutorial or examples? Thanks.
Shawn31313 almost 11 years

Never heard of it. Was just answering the OP's question.
Aarif Qureshi almost 11 years

your json string is not valid json ,Are you generating from yourself?
Aarif Qureshi almost 11 years

{ "Table": [ { "stateid": "2", "statename": "Tamilnadu" }, { "stateid": "3", "statename": "Karnataka" } ] }
Shawn31313 almost 11 years

@Aarif Just using what the OP gave me to work with. The JSON in my code is now valid. I checked it.
Aarif Qureshi almost 11 years

this is the valid json format,replace stateid with your ID and statename with your NAME
Shawn31313 almost 11 years

What do you mean? Everything works. Just check the fiddle. @Aarif
Aarif Qureshi almost 11 years

please make sure this javascript code is in $().ready(function () {});
Shawn31313 almost 11 years

@Aarif jQuery is not tagged. Used window.onload instead.
web-nomad almost 11 years

@Aarif The code given here does not need to be point perfect. It gives the idea of how to use JSON to create drop-downs. The OP can take the idea and see to it that his/her JSON is perfect. Why are you wasting time on such stuff?
Shawn31313 almost 11 years

@Pushpesh I'm sure I answered before he could so now he is picking at every aspect of my code. No hurt feeling though, because it works.
user2533762 almost 11 years

I took a look at the jsfiddle example and this works perfectly when I added extra data that I left out of my question. I appreciate the help.
Aarif Qureshi almost 11 years

oh sorry yar i thought this code was from the person who has posted this question