JSONをファイルからドロップダウンリストにJavaScriptで読み込みますか？

Question

JSONファイルをドロップダウンリストに含めるのに問題があります。

JSON：

{ 
"BD": "Bangladesh", 
"BE": "Belgium", 
"BF": "Burkina Faso", 
"BG": "Bulgaria", 
"BA": "Bosnia and Herzegovina" 
} 

私は次のようにドロップダウンリストに値を入れたい： 例：

<select name="optCountry" id="opt_country"> 
    <option value="BD">Bangladesh</option> 
    <option value="BE">Belgium</option> 
    <option value="BF">Burkina Faso</option> 
    <option value="BG">Bulgaria</option> 
    <option value="BH">Bosnia and Herzegovina</option> 
</select> 

Answer 1

は、JSON文字列をオブジェクトに変換し、別々でObject.keys()使用とJSON.parse()使用して試してみてください配列のキー値。Array#forEachを使用してキー値を繰り返します。 document.createElementはselect要素Object.prototype.hasOwnProperty()してJSON上ドム

var a = '{"BD": "Bangladesh","BE": "Belgium","BF": "Burkina Faso","BG":"Bulgaria","BA": "Bosnia and Herzegovina"}' 
 
var obj = JSON.parse(a); 
 
var select = document.createElement('SELECT') 
 
select.name="optCountry" 
 
select.id="opt_country" 
 
document.body.appendChild(select) 
 

 
Object.keys(obj).forEach(function(a){ 
 
document.getElementById('opt_country').innerHTML +='<option value="'+a+'">'+obj[a]+'</option>' 
 
})

Answer 2

反復を形成し、innerHTMLを使用してselect要素に付加group.thenオプションを作るの作成に使用されます。

var json = '{"BD": "Bangladesh","BE": "Belgium","BF": "Burkina Faso","BG":"Bulgaria","BA": "Bosnia and Herzegovina"}'; 
 
var data = JSON.parse(json); 
 
var result=''; 
 
for (var property in data) { 
 
    if (data.hasOwnProperty(property)) { 
 
\t result+='<option value="'+property+'">'+data[property]+'</option>'; 
 
    } 
 
} 
 
document.getElementById('opt_country').innerHTML=result;

<select name="optCountry" id="opt_country"> 
 
</select>

Answer 3

どのようにこのようなものでしょうか？ あなたのJSONデータが変数js_dataに格納されていると考えられる：

const droplist = document.getElementById("opt_country") 
droplist.innerHTML = "" //clear the dropdown list 
Object.getOwnPropertyNames(js_data).forEach(function(element){ 
    droplist.innerHTML += '<option value="'+element+'">'+js_data[element]+'</option>' 
}) 

Answer 4

このコード

var Country= { 
 
"BD": "Bangladesh", 
 
"BE": "Belgium", 
 
"BF": "Burkina Faso", 
 
"BG": "Bulgaria", 
 
"BA": "Bosnia and Herzegovina" 
 
} 
 
var strInnerHTML = ""; 
 
$.each(Country, function(index, value) { 
 
    strInnerHTML +='<option value="'+index+'">'+value+'</option>'; 
 
}); 
 
document.getElementById('opt_country').innerHTML = strInnerHTML;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<select name="optCountry" id="opt_country"> 
 
</select>

Answer 5

var obj = JSON.parse('{ 
    "BD": "Bangladesh", 
    "BE": "Belgium", 
    "BF": "Burkina Faso", 
    "BG": "Bulgaria", 
    "BA": "Bosnia and Herzegovina" 
    }'); 

    //using jquery 
    x=[] 
    $.each(myObj, function(i,n) { 
     x.push(n);}); 

    $.each(x, function (key, value) { 
         $("#opt_country").append($("<option></option>").val(key).html(value[key])); 
        }); 

//add following script to include jquery : 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 

をお試しください