Comment créer le HTML, sélectionnez l'option de JSON de hachage?

J'ai un simple code JSON:

[{'1':'Name'}, {'2', 'Age'}, {'3','Gender'}]

J'ai une balise select dans mon code HTML:

<select name="datas" id="datas"></select>

J'ai besoin d'un moyen simple de créer HTML de sélectionner la zone à partir de ce JSON, comme ceci:

<select name="datas" id="datas">
    <option value="1">Name</option>
    <option value="2">Age</option>
    <option value="3">Gender</option>
</select>
WHYT (qu'avez-vous essayé)?
Quelques conseils: foreach(), document.createElement(), et .appendChild().

OriginalL'auteur netdjw | 2012-01-30

  1. 7

    Juste pour le plaisir voici une réponse dans le plus pur javascript, aussi vous n'avez probablement pas besoin d'un tableau pour ce juste un simple objet suffira

        <select name="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>
    merci, c'est une bonne solution pour moi.
    key et obj[key] devrait au moins être codé correctement. Imaginez si obj = {"1" : "> one &","2":"This has a quote \" in it"}. Il est plus sûr de générer de l'aide .ajouter que de rejoindre les chaînes html

    OriginalL'auteur Michal

  2. 7

    De l'essayer.

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

    Créer option élément et ensuite utiliser append méthode pour ajouter à sélectionner l'élément.

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

    Démo

    OriginalL'auteur ShankarSangoli

  3. 1

    La réponse ci-dessus suppose que les données index de la table sont dans l'ordre. Que faire si la variable de données serait:

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

    Donc, dans l'ordre alphabétique, mais avec un id aléatoire.

    Une façon que j'ai trouvée dans la résolution de ce est:

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

    OriginalL'auteur steviethecat