Q&A
この質問てば本当にJavaScript？
実現したいこと
初めまして。初心者のため説明が分かりにくいと思いますがよろしくお願いします。
script.jsに記述した配列を、htmlで見た時に記述リスト（dl/dt/dd）として表示させたいと思っています。
javascriptやhtmlの元データはこちらを参考にしています。
※前提として、underscore.jsが必要なものになります。説明不足で申し訳ありません。
javascript
1var Lists = [ 2 { name: 'あいうえお', tag: ['趣味１','趣味２','趣味３'], desc: ['あああ','いいい','ううう'] }, 3 { name: 'かきくけこ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['かかか','ききき','くくく','けけけ'] }, 4 { name: 'さしすせそ', tag: ['趣味１','趣味２','趣味３'], desc: ['さささ','ししし','すすす'] }, 5 { name: 'たちつてと', tag: ['趣味１','趣味２'], desc: ['たたた','ちちち'] }, 6 ];
という配列があり（中身は仮ですが）、これを実際に
html
1<h3>あいうえお</h3> 2<dl> 3 <dt>趣味１</dt> 4 <dd>あああ></dd> 5 <dt>趣味２</dt> 6 <dd>いいい</dd> 7 <dt>趣味３</dt> 8 <dd>ううう</dd> 9</dl>
のように順番に出力したいのですが、うまくいきません。
試したこと
html
1<dl> 2 <% _.each(line.tag, function(tag) { %> 3 <dt><%= tag %></dt> 4 <% }) %> 5 <% _.each(line.desc, function(tag) { %> 6 <dd><%= tag %></dd> 7 <% }) %> 8</dl>
のように記述してみましたが、やはり
html
1<dl> 2 <dt>趣味１</dt> 3 <dt>趣味２</dt> 4 <dt>趣味３</dt> 5 <dd>あああ></dd> 6 <dd>いいい</dd> 7 <dd>ううう</dd> 8</dl>
のようになってしまいます。
人によって趣味の数が違うため、
javascript
1 { name: 'あいうえお', hobby1name: '趣味１', hobby1desc: 'あああ' hobby2name:・・・},
のように１つずつ書いてもhtml側で個別に対応できないのではないかと勝手に思っています。
また、趣味名（dt）の部分はcssで装飾して説明文（dd）と区別をしたいので、
javascript
1 { name: 'あいうえお', hobby: ['趣味１：あああ','趣味２：いいい','趣味３：ううう']},
とあらかじめくっつけて記述しておくのは個人的にしたくありません。
解決策が分かる方がいましたら、ぜひ教えていただきたく思います。
よろしくお願いいたします。
underscore.jsが前提であれば、質問文に追記した方がよろしいかと思います。
質問文に追記しました。説明不足で申し訳ありませんでした。
データのもたせ方とHTMLの構造及びCSSによるスタイル付けは全く関係ないので, スクリプトの作り次第でどうにでもなります.
回答2件
0
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"/> 5 <script type="text/javascript" src="underscore.js"></script> 6 </head> 7 <body> 8<!--ここから下がUnderscore.jsを使用した処理--> 9 <script> 10 var temp_str = "<% var list = [" + 11 "{ name: 'ムスカ', tag: ['趣味１','趣味２','趣味３'], desc: ['幼女','射撃','目があああ'] }," + 12 "{ name: 'ドーラ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['育児','指揮','度胸','上手そうに食べる'] }," + 13 "{ name: '親方', tag: ['趣味１','趣味２','趣味３'], desc: ['シカと','ゲンコツ','シャツ破り'] }," + 14 "{ name: 'シータ', tag: ['趣味１','趣味２'], desc: ['掃除','バルス'] }];" + 15 "%>" + 16 "<% _.each(list, function(val){ %>" + 17 "<h3><%= val.name %></h3>" + 18 "<dl>" + 19 "<% for(let i = 0; i < val.tag.length; i++){ %>" + 20 "<dt><%= val.tag[i] %></dt>" + 21 "<dd><%= val.desc[i] %></dd>" + 22 "<% } %>" + 23 "</dl>" + 24 "<% }); %>"; 25 var temp = _.template(temp_str); 26 var html = temp(); 27 document.body.innerHTML = html; 28 </script> 29<!--ここから下がUnderscore.js無しの処理--> 30 <script> 31 const list = [ 32 { name: 'ムスカ', tag: ['趣味１','趣味２','趣味３'], desc: ['幼女','ロムスカ・パロ・ウル','目があああ'] }, 33 { name: 'ドーラ', tag: ['趣味１'], desc: ['ハムを食いちぎる'] }, 34 { name: '親方', tag: ['趣味１','趣味２','趣味３'], desc: ['シカと','ゲンコツ','シャツ破り'] }, 35 { name: 'シータ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['掃除','バルス','スルー','物探し'] } 36 ]; 37 //HTML内埋め込みとの境界線 38 let frag_node = document.createDocumentFragment(); 39 const p = document.createElement("p"); 40 const line = document.createTextNode("-------ここから下がUnderscore.js無しの処理-------"); 41 42 p.appendChild(line); 43 frag_node.appendChild(p); 44 for(let i in list){ 45 //h3 46 const h3 = document.createElement("h3"); 47 const name = document.createTextNode(list[i].name); 48 h3.appendChild(name); 49 frag_node.appendChild(h3); 50 //dl 51 const dl = document.createElement("dl"); 52 for(const j in list[i].tag){ 53 //dt 54 const dt = document.createElement("dt"); 55 const tag = document.createTextNode(list[i].tag[j]); 56 dt.className = "tag"; 57 dt.appendChild(tag); 58 dl.appendChild(dt); 59 //dd 60 const dd = document.createElement("dd"); 61 const desc = document.createTextNode(list[i].desc[j]); 62 dd.className = "desc"; 63 dd.appendChild(desc); 64 dl.appendChild(dd); 65 } 66 frag_node.appendChild(dl); 67 } 68 document.body.appendChild(frag_node); 69 </script> 70 </body> 71</html>
面白そうだったのでunderscore.jsちょっとかじってみました！
期待にそえる内容か分かりませんが一応成果を載せておきます。
上のscriptタグがunderscore.jsを使用したコード。
下のscriptタグが未使用のコードです。
「配列操作をバリバリする」もしくは「underscore.jsを使用しないといけない」という状況でないのであれば、下のscriptタグのコードの方が扱いやすいのでお勧めです！
コピペで検証出来ると思いますので参考までに。
<追記>
アドバイスを受けて修正版です。
アドレスありがとうございます！
投稿2018/04/19 00:50
編集2018/04/19 01:09
退会済みユーザー
総合スコア0
あとはDocumentFragmentでノード追加を一回で済ますようにするとよさげ
わざわざ1から記述していただいて有難うございます！
挙げて下さった例に笑ってしまいました。
見事に動きました、まさにこれです、凄いです！
本当はこれをこのまま使用すれば見た目もスッキリして楽なのでしょうが、
下のdefghi1977さんの方法で解決したのでベストアンサーに出来ず申し訳ありません。
保存させていただいたのでまた別な内容で作る際に参考にさせていただきます。
大変お世話になりました。
0
ベストアンサー
例えばこんな？
JavaScript
1document.body.innerHTML = [ 2 { name: 'あいうえお', tag: ['趣味１','趣味２','趣味３'], desc: ['あああ','いいい','ううう'] }, 3 { name: 'かきくけこ', tag: ['趣味１','趣味２','趣味３','趣味４'], desc: ['かかか','ききき','くくく','けけけ'] }, 4 { name: 'さしすせそ', tag: ['趣味１','趣味２','趣味３'], desc: ['さささ','ししし','すすす'] }, 5 { name: 'たちつてと', tag: ['趣味１','趣味２'], desc: ['たたた','ちちち'] }, 6].reduce((prev, obj) => (dtdd => prev + `<h1>${obj.name}</h1><dl>${dtdd}</dl>`)(obj.tag.reduce((prev, t, i) => prev + `<dt>${t}</dt><dd>${obj.desc[i]}</dd>`,"")), "");
もしくはデータのもたせ方を
JavaScript
1[ 2 { name: 'あいうえお', hobby: [['趣味１', 'あああ'], ['趣味２', 'いいい'], ['趣味３', 'ううう']]}, 3 { name: 'かきくけこ', hobby: [['趣味１', 'かかか'], ['趣味２', 'ききき'], ['趣味３', 'くくく'], ['趣味４', 'けけけ']]} 4];
とか
JavaScript
1[ 2 { name: 'あいうえお', hobby: [{'趣味１': 'あああ'}, {'趣味２': 'いいい'}, {'趣味３': 'ううう'}]}, 3 { name: 'かきくけこ', hobby: [{'趣味１': 'かかか'}, {'趣味２': 'ききき'}, {'趣味３': 'くくく'}, {'趣味４': 'けけけ'}]} 4];
としてやれば, 大分HTMLの構造に近づくので処理が行いやすいかと.
投稿2018/04/18 14:07
編集2018/04/18 14:20総合スコア4756
早速の回答ありがとうございました。
一番下の記述方法が分かりやすそうだと思い、script.jsをそう修正した上でhtmlを
<dl>
<% _.each(line.hobby, function(val,key) { %>
<dt><%= val %></dt>
<dd><%= key %></dd>
<% }) %>
</dl>
と書き換えてみたのですが、全て"[object Object]"とサイト上で表示されてしまいます…
表示されたリストの数自体はちゃんと人それぞれの数に合致していたので、認識はしてくれたのだと思います。
あとは内容さえ表示できればまさにしたかった事になるのですが、どこの記述が悪いのか分かりますでしょうか。
勉強不足で大変申し訳ありません。
underscore.jsを知らんからなんとも言えんけど, 配列ならいけるんじゃない？
<dl>
<% _.each(line.hobby, function(arr) { %>
<dt><%= arr[0] %></dt>
<dd><%= arr[1] %></dd>
<% }) %>
</dl>
とかで
出来ました！！！
最初は出来ずにサイト表示が止まってしまったのですが、
リストを真ん中の方法（[]をさらに[]でくくる方法）に変えたところその通りになりました！
本当にありがとうございました！
今回は大変お世話になりました。お陰でよりよいものが出来そうです。
あなたの回答
tips
プレビュー
