配列を動的にセレクトボックスとして出力したい（JavaScript）

Question

ユーザーの行動に応じて取得された配列を元に、
動的にhtml上でセレクトボックスを出力したいと思っています。

list1 = [
 { "number":"1", "name":"りんご" },
 { "number":"2", "name":"みかん" },
 { "number":"3", "name":"なし" },
 { "number":"4", "name":"オレンジ" }
]

こういう配列が取得されたとき、
セレクトボックスに「りんご」「みかん」「なし」「オレンジ」と出力したいイメージです。

<select name="select1" id="select1" class="select1">
<option value="select1" selected>------</option>
</select>

for(var i=0;i<list1.length;i++){
 var op = document.createElement("option");
 op.value = list1[i].name;  //value値
 op.text = list1[i].name;   //テキスト値
 document.getElementById("select1").appendChild(op);
}

現状
appendChildで追加できる見込みが、htmlに何も追加されません。
ループはちゃんと回数分回っているようなのですが…
コンソールにエラーメッセージも表示されず、行き詰まっています。
お知恵をお借りできれば幸いです。

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  list1.reduce((x,y)=>(x.appendChild(
    Object.assign(
      document.createElement('option'),
      {value:y.number,textContent:y.name}
      )
    ),x),document.querySelector('#select1'));
});

Comments

[yambejp]

よく考えたらオブジェクトを返す必要がないので
reduceする必要なかったですね
普通にforEachでした

[spangl]

環境上ES6が使えないため（…）、修正しながら
試してみようと思います。ありがとうございます！

[yambejp]

>ES6が使えない

なるほど、ちょっと難儀な環境なようですね
IE環境だとするとObject.assignをサポートしていないので
もっと冗長な書き方になりそうです

window.addEventListener('DOMContentLoaded',function(){
list1.forEach(function(x){
const opt=document.createElement('option');
opt.value=x.number;
opt.text=x.name;
document.querySelector('#select1').appendChild(opt);
});
});

[spangl]

修正コードまで！ありがとうございます…！

こちらのコードをお借りして（constだけvarにさせていただきました）
先ほど試してみたのですが、やはりappendChildできませんでした…。
エラーメッセージはなく、環境要因の可能性も考えています。

何度もありがとうございました。

[yambejp]

ご利用の環境は相当やばそうですあえて書けばこんな感じ

<script>
var list1 = Array(
{ "number":"1", "name":"りんご" },
{ "number":"2", "name":"みかん" },
{ "number":"3", "name":"なし" },
{ "number":"4", "name":"オレンジ" }
);
try{
window.addEventListener("DOMContentLoaded",function(e){
myfunc(e);
},true);
}catch(e){
window.attachEvent("onload",function(e){
myfunc(e);
});
}
function myfunc(){
for(var i=0;i<list1.length;i++){
var x=list1[i];
var opt=document.createElement('option');
opt.value=x.number;
opt.innerHTML=x.name;
console.log(opt);
document.getElementById('select1').appendChild(opt);
};
};
</script>
<select name="select1" id="select1" class="select1">
<option value="select1" selected>------</option>
</select>

Answer 2

channel を number とか name に書き換えましょう。
動くサンプル：https://jsfiddle.net/bhz4256u/

Comments

[kei344]

https://teratail.com/questions/history-questions/308028
当該部分が修正されたので追記、要素のロードを待ちましょう。

【Window: DOMContentLoaded イベント - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event

[spangl]

お手数をお掛けしました。
今は「Cannot read property 'appendChild' of null」のエラーが出ているので、
おそらくご提示いただいた通り読み込み順の問題な気がします。
こちら参考にしてみます！