質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

878閲覧

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

spangl

総合スコア21

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/03 12:33

編集2020/12/03 12:35

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

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

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

html

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

JavaScript

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

javascript

1window.addEventListener('DOMContentLoaded', ()=>{ 2 list1.reduce((x,y)=>(x.appendChild( 3 Object.assign( 4 document.createElement('option'), 5 {value:y.number,textContent:y.name} 6 ) 7 ),x),document.querySelector('#select1')); 8});

投稿2020/12/03 12:49

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/12/03 12:54

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

2020/12/03 13:08

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

2020/12/03 13:21 編集

>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

2020/12/03 13:29

修正コードまで!ありがとうございます…! こちらのコードをお借りして(constだけvarにさせていただきました) 先ほど試してみたのですが、やはりappendChildできませんでした…。 エラーメッセージはなく、環境要因の可能性も考えています。 何度もありがとうございました。
yambejp

2020/12/04 00:19 編集

ご利用の環境は相当やばそうですあえて書けばこんな感じ <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>
guest

0

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

投稿2020/12/03 12:37

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spangl

2020/12/03 12:43

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問