Q&A
提示のものは「連想配列」では（厳密には）ありません。オブジェクトが入った配列です。
いつもお世話になってます。
javascript初学者です。
現在、連想配列の操作について勉強中です。
forEachを使って全ての値を取得しようとしてます。
consoleでは上手く表示されますが、ウェブサイト上で表示させようとすると上手く書き出すことができません。
初歩的な質問で申し訳ございませんが、ご教示頂けないでしょうか。
今、困っていること
forEachを使用して値を取得する。
consoleでは表示されているがウェブサイト上には表示されない。
発生しているエラーメッセージ
特になし
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>連想配列</title> 6</head> 7<body> 8 <h1>連想配列について</h1> 9 <div id = "disp"></div> 10 <script src = "forEach.js"></script> 11</body> 12</html>
javascript
1// 10:北海道,11:東北,13:関東,14:中部,15:関西,16:中部四国,17:九州,18:沖縄 2// var productId = 0; 3var codeArrays = [ 4 {num:"10",pref:"Hokkaido"}, 5 {num:"11",pref:"Tohoku"}, 6 {num:"13",pref:"Kanto"}, 7 {num:"14",pref:"Chubu"}, 8 {num:"15",pref:"Kansai"}, 9 {num:"16",pref:"ChuShikoku"}, 10 {num:"17",pref:"kYushu"}, 11 {num:"18",pref:"Ryukyu"} 12]; 13// console.log(codeArrays[1][0]); 14 15codeArrays.forEach(function (value){ 16 var disp = document.getElementById("disp"); 17 disp.textContent = codeArrays; 18 console.log(value); 19});
処理結果
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]となってしまう。
試したこと
textContntを使用すれば書き出せると思いましたが上手くできませんでした。
回答2件
0
こんにちは、hiroo_mokumokuさん
numとprefの値をHTMLに表示したいとのことですね。
まず、JavaScriptでデータを表示する際はどのようなHTML構成にするかを決めてから取り掛かると良いと思います。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>連想配列</title> 6</head> 7<body> 8 <h1>連想配列について</h1> 9 <ul id="disp"><!-- <= idと=の間ははスペースは入れないのが一般的です --> 10 <!-- <li><span>ここにnum</span><span>ここにpref</span></li> --> 11 </ul> 12 <script src="forEach.js"></script><!-- <= srcと=の間はスペースは入れないのが一般的です --> 13</body> 14</html>
ここでは、
<li><span>ここにnum</span><span>ここにpref</span></li> のようなHTMLを作成して、順に disp の中に追加してあげれば良さそうです。
そこでJavaScript側で要素を作成し、追加していきましょう。
javascript
1// 10:北海道,11:東北,13:関東,14:中部,15:関西,16:中部四国,17:九州,18:沖縄 2// var productId = 0; 3var codeArrays = [ 4 {num:"10",pref:"Hokkaido"}, 5 {num:"11",pref:"Tohoku"}, 6 {num:"13",pref:"Kanto"}, 7 {num:"14",pref:"Chubu"}, 8 {num:"15",pref:"Kansai"}, 9 {num:"16",pref:"ChuShikoku"}, 10 {num:"17",pref:"kYushu"}, 11 {num:"18",pref:"Ryukyu"} 12]; 13// console.log(codeArrays[1][0]); 14 15// disp自体はループの中の取得は不要です。 16// 一度取得した `disp` に作成する要素を追加していきます。 17var disp = document.getElementById("disp"); 18 19codeArrays.forEach(function (obj){ 20 var numSpan = document.createElement('span'); // num を入れる span を作る 21 numSpan.textContent = obj.num; // num の値を入れる 22 23 var prefSpan = document.createElement('span'); // pref を入れる span を作る 24 prefSpan.textContent = obj.pref; // pref の値を入れる 25 26 var li = document.createElement('li'); // 上記2つの span を入れるための li を作る 27 li.appendChild(numSpan); // 作った li の中に num の入った span を追加します 28 li.appendChild(prefSpan); // 同じ li の中に pref の入った span を追加します 29 30 disp.appendChild(li); // num の入った span と pref の入った span の2つ の span が入っている li を disp（ul）に追加します 31});
順に説明していくと
まず forEachのコールバックで渡ってくる引数は オブジェクト です。
（ちなみにJavaScriptではkeyとvalueのペアのデータ構造のことはオブジェクトと呼びます。他のプログラミング言語では連想配列という呼ぶことがありますが、JavaScriptではオブジェクトです。）
具体的には、
javascript
1codeArrays.forEach(function (obj){ 2 console.log(obj); 3});
を実行すると、
console
1> Object { num: "10", pref: "Hokkaido" } 2> Object { num: "11", pref: "Tohoku" } 3> ... 4
のように配列に格納されているオブジェクトが順に表示されます。
なので、num が欲しい場合は obj.num で取得できますし、
pref が欲しい場合は obj.pref で取得できます。
さてデータが取得できたので、それぞれの要素（<span></span>などのタグ）を作っていましょう。
要素を作るメソッドは document.createElement です。
javascript
1 var numSpan = document.createElement('span'); // num を入れる span を作る 2 // これで、 <span></span> ができました
さらに、以下のように値を追加できます
javascript
1 numSpan.textContent = obj.num; // num の値を入れる 2 // これで、 <span>10</span> となります
続いて pref は
javascript
1 var prefSpan = document.createElement('span'); // pref を入れる span を作る 2 // ここで別の <span></span> が新たにでき 3 prefSpan.textContent = obj.pref; // pref の値を入れる 4 // <span>Hokkaido</span> となります
さて、値の入った2つのspanができたので、追加するための li を作り、それぞれのspanを追加します
javascript
1 var li = document.createElement('li'); // 上記2つの span を入れるための li を作る 2 // ここで <li></li> ができます 3 li.appendChild(numSpan); // 作った li の中に num の入った span を追加します 4 // ここで <li><span>10</span></li> となります 5 li.appendChild(prefSpan); // 同じ li の中に pref の入った span を追加します 6 // ここで <li><span>10</span><span>Hokkaido</span></li> となります
そして最後にできあがった li をHTMLの #disp に追加します
javascript
1 disp.appendChild(li); // num の入った span と pref の入った span の2つ の span が入っている li を disp（ul）に追加します
のタイミングで
html
1...（省略) 2 <h1>連想配列について</h1> 3 <ul id="disp"> 4 <li><span>10</span><span>Hokkaido</span></li> 5 </ul> 6...（省略)
となります。以上の工程が、配列に格納されているオブジェクトの個数分、実行されることになります。
リンクで提示した JavaScript - MDN は、最初とっつきにくいかもしれませんが、一次ソースの信頼がおけるドキュメントですので、参考にされると良いと思います。
以上、長くなりましたが、参考になれば幸いです。
投稿2020/02/24 05:16
総合スコア406
0
上書きしているからだと思います。
js
1// disp.textContent = value.num; 2// ↓ これでどうでしょう。 3 disp.textContent += value.num;
js
1// こうとか。 2disp.insertAdjacentHTML( "beforeend", value.num );
【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 01日目） | Ginpen.com】
http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/
投稿2020/02/23 15:15
編集2020/02/23 15:19総合スコア69625
回答ありがとうございます。
>>提示のものは「連想配列」では（厳密には）ありません。オブジェクトが入った配列です。
配列なので全ての値を取り出すことはできないという認識で合ってますか？
いいえ、違います。
こちらの提示したことは試されていないのでしょうか。
>>こちらの提示したことは試されていないのでしょうか。
頂いたコードを試してみましたが,numの値しか取得されません。prefの値も同時に取得したいです。
やりたいことはnumとprefの値を同時に取得し、ウェブサイト上に表示したいです。言葉足らずですみません。
文字列として連結してから代入すればよいだけですよ。
【文字列の連結 - 演算子 - JavaScript入門】
https://www.javadrive.jp/javascript/ope/index16.html
念のためオブジェクトの扱い方も。
【JavaScriptの基本をサルでもわかるようにまとめた【入門用】 - いつ俺〜いつから俺ができないと錯覚していた？〜】
http://www.ituore.com/entry/javascript-basic#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88
アドバイスありがとうございます！
試しにやってみます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。