Javascript jsonデータをES6で選択した場合（jqueryなし）

Question

json形式のデータをいくつか選択しています。ここで

{ 
    "timezones": 
    { 
     "country": "Africa", 
     "tz": "Africa/Abidjan" 
    }, 
    { 
     "country": "America", 
     "tz": "America/Anguilla" 
    } 
} 

ある現在の選択：ここで

はデータです

<select> 

    <optgroup label="Africa"> 
     <option value="Africa/Abidjan">Adak</option> 
    </optgroup> 

    <optgroup label="America"> 
     <option value="America/Adak">Anguilla</option> 
    </optgroup> 

</select> 

は、どのように私の代わりにjQueryせずにハードコーディングのJSONデータから選択取り込むことができますか？

Answer 1

.forEachメソッドと組み合わせてappendChildメソッドを使用できます。まず

let obj={ 
 
    "timezones": 
 
    [{ 
 
     "country": "Africa", 
 
     "tz": "Africa/Abidjan" 
 
    }, 
 
    { 
 
     "country": "America", 
 
     "tz": "America/Anguilla" 
 
    }] 
 
}; 
 
let select=document.getElementById('countrySelect'); 
 
obj.timezones.forEach(function(item){ 
 
    let newOptGroup=document.createElement('optgroup'); 
 
    newOptGroup.label=item.country; 
 
    let option=document.createElement('option'); 
 
    option.value=item.tz; 
 
    option.text=item.tz; 
 
    newOptGroup.appendChild(option); 
 
    select.appendChild(newOptGroup); 
 
});

<select id="countrySelect"> 
 

 
</select>

Answer 2

、あなたはJSONデータが有効ではありませんね。 'timezones'は配列であるか、すべてのオブジェクトにインデックスを持ちます。

データ

let data = { 
    "timezones": [ 
    { 
     "country": "Africa", 
     "tz": "Africa/Abidjan" 
    }, 
    { 
     "country": "America", 
     "tz": "America/Anguilla" 
    }] 
} 

私は次のようにオプションを移入します：

data.timeszones.forEach(function(timezone) { 
    let optionGroup = document.createElement('optgroup'); 
     optionGroup.setAttribute('label', timezone.country); 

    let option = document.createElement('option'); 
     option.setAttribute('value', timezone.tz); 

    optionGroup.appendChild(option); 
    document.getElementById('selectionList').appendChild(optionGroup); 
}); 

そしてobvisouslyは、あなたの要素にIDを設定することを忘れないでください。

<select id='selectionList'> 
    <optgroup label="Africa"> 
     <option value="Africa/Abidjan">Adak</option> 
    </optgroup> 

    <optgroup label="America"> 
     <option value="America/Adak">Anguilla</option> 
    </optgroup> 
</select>