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

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

ただいまの
回答率

90.62%

  • JavaScript

    15898questions

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

  • HTML

    8663questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6529questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

javascriptの配列を交互にhtmlの記述リストに入れ込みたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 519

toramo

score 5

 実現したいこと

初めまして。初心者のため説明が分かりにくいと思いますがよろしくお願いします。
script.jsに記述した配列を、htmlで見た時に記述リスト(dl/dt/dd)として表示させたいと思っています。
javascriptやhtmlの元データはこちらを参考にしています。
※前提として、underscore.jsが必要なものになります。説明不足で申し訳ありません。

var Lists = [
 { name: 'あいうえお', tag: ['趣味1','趣味2','趣味3'], desc: ['あああ','いいい','ううう'] },
 { name: 'かきくけこ', tag: ['趣味1','趣味2','趣味3','趣味4'], desc: ['かかか','ききき','くくく','けけけ'] },
 { name: 'さしすせそ', tag: ['趣味1','趣味2','趣味3'], desc: ['さささ','ししし','すすす'] },
 { name: 'たちつてと', tag: ['趣味1','趣味2'], desc: ['たたた','ちちち'] },
  ];


という配列があり(中身は仮ですが)、これを実際に

<h3>あいうえお</h3>
<dl>
 <dt>趣味1</dt>
 <dd>あああ></dd>
 <dt>趣味2</dt>
 <dd>いいい</dd>
 <dt>趣味3</dt>
 <dd>ううう</dd>
</dl>


のように順番に出力したいのですが、うまくいきません。

 試したこと

<dl>
 <% _.each(line.tag, function(tag) { %>
  <dt><%= tag %></dt>
 <% }) %>
 <% _.each(line.desc, function(tag) { %>
  <dd><%= tag %></dd>
 <% }) %>
</dl>


のように記述してみましたが、やはり

<dl>
 <dt>趣味1</dt>
 <dt>趣味2</dt>
 <dt>趣味3</dt>
 <dd>あああ></dd>
 <dd>いいい</dd>
 <dd>ううう</dd>
</dl>


のようになってしまいます。
人によって趣味の数が違うため、

 { name: 'あいうえお', hobby1name: '趣味1', hobby1desc: 'あああ' hobby2name:・・・},


のように1つずつ書いてもhtml側で個別に対応できないのではないかと勝手に思っています。
また、趣味名(dt)の部分はcssで装飾して説明文(dd)と区別をしたいので、

 { name: 'あいうえお', hobby: ['趣味1:あああ','趣味2:いいい','趣味3:ううう']},


とあらかじめくっつけて記述しておくのは個人的にしたくありません。

解決策が分かる方がいましたら、ぜひ教えていただきたく思います。
よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2018/04/18 22:54

    この質問てば本当にJavaScript?

    キャンセル

  • HayatoKamono

    2018/04/18 23:02

    underscore.jsが前提であれば、質問文に追記した方がよろしいかと思います。

    キャンセル

  • toramo

    2018/04/18 23:10

    質問文に追記しました。説明不足で申し訳ありませんでした。

    キャンセル

  • defghi1977

    2018/04/18 23:25

    データのもたせ方とHTMLの構造及びCSSによるスタイル付けは全く関係ないので, スクリプトの作り次第でどうにでもなります.

    キャンセル

回答 2

+4

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="underscore.js"></script>
  </head>
  <body>
<!--ここから下がUnderscore.jsを使用した処理-->
    <script>
      var temp_str =  "<% var list = [" +
                  "{ name: 'ムスカ', tag: ['趣味1','趣味2','趣味3'], desc: ['幼女','射撃','目があああ'] }," +
                  "{ name: 'ドーラ', tag: ['趣味1','趣味2','趣味3','趣味4'], desc: ['育児','指揮','度胸','上手そうに食べる'] }," + 
                  "{ name: '親方', tag: ['趣味1','趣味2','趣味3'], desc: ['シカと','ゲンコツ','シャツ破り'] }," +
                  "{ name: 'シータ', tag: ['趣味1','趣味2'], desc: ['掃除','バルス'] }];" +
                  "%>" +
                    "<% _.each(list, function(val){ %>" +
                    "<h3><%= val.name %></h3>" +
                    "<dl>" +
                    "<% for(let i = 0; i < val.tag.length; i++){ %>" +
                      "<dt><%= val.tag[i] %></dt>" +
                      "<dd><%= val.desc[i] %></dd>" +
                    "<% } %>" +
                    "</dl>" +
                  "<% }); %>";
      var temp = _.template(temp_str);
      var html = temp();
      document.body.innerHTML = html;
    </script>
<!--ここから下がUnderscore.js無しの処理-->
    <script>
      const list = [
        { name: 'ムスカ', tag: ['趣味1','趣味2','趣味3'], desc: ['幼女','ロムスカ・パロ・ウル','目があああ'] },
        { name: 'ドーラ', tag: ['趣味1'], desc: ['ハムを食いちぎる'] },
        { name: '親方', tag: ['趣味1','趣味2','趣味3'], desc: ['シカと','ゲンコツ','シャツ破り'] },
        { name: 'シータ', tag: ['趣味1','趣味2','趣味3','趣味4'], desc: ['掃除','バルス','スルー','物探し'] }
      ];
      //HTML内埋め込みとの境界線
      let   frag_node = document.createDocumentFragment();
      const p = document.createElement("p");
      const line = document.createTextNode("-------ここから下がUnderscore.js無しの処理-------");

      p.appendChild(line);
      frag_node.appendChild(p);
      for(let i in list){
        //h3
        const h3 = document.createElement("h3");
        const name = document.createTextNode(list[i].name);
        h3.appendChild(name);
        frag_node.appendChild(h3);
        //dl
        const dl = document.createElement("dl");
        for(const j in list[i].tag){
          //dt
          const dt = document.createElement("dt");
          const tag = document.createTextNode(list[i].tag[j]);
          dt.className = "tag";
          dt.appendChild(tag);
          dl.appendChild(dt);
          //dd
          const dd = document.createElement("dd");
          const desc = document.createTextNode(list[i].desc[j]);
          dd.className = "desc";
          dd.appendChild(desc);
          dl.appendChild(dd);
        }
        frag_node.appendChild(dl);
      }
      document.body.appendChild(frag_node);
    </script>
  </body>
</html>


面白そうだったのでunderscore.jsちょっとかじってみました!
期待にそえる内容か分かりませんが一応成果を載せておきます。
上のscriptタグがunderscore.jsを使用したコード。
下のscriptタグが未使用のコードです。
「配列操作をバリバリする」もしくは「underscore.jsを使用しないといけない」という状況でないのであれば、下のscriptタグのコードの方が扱いやすいのでお勧めです!
コピペで検証出来ると思いますので参考までに。
<追記>
アドバイスを受けて修正版です。
アドレスありがとうございます!

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/19 09:56

    あとはDocumentFragmentでノード追加を一回で済ますようにするとよさげ

    キャンセル

  • 2018/04/20 00:16

    わざわざ1から記述していただいて有難うございます!
    挙げて下さった例に笑ってしまいました。
    見事に動きました、まさにこれです、凄いです!
    本当はこれをこのまま使用すれば見た目もスッキリして楽なのでしょうが、
    下のdefghi1977さんの方法で解決したのでベストアンサーに出来ず申し訳ありません。
    保存させていただいたのでまた別な内容で作る際に参考にさせていただきます。
    大変お世話になりました。

    キャンセル

checkベストアンサー

+2

例えばこんな?

document.body.innerHTML = [
 { name: 'あいうえお', tag: ['趣味1','趣味2','趣味3'], desc: ['あああ','いいい','ううう'] },
 { name: 'かきくけこ', tag: ['趣味1','趣味2','趣味3','趣味4'], desc: ['かかか','ききき','くくく','けけけ'] },
 { name: 'さしすせそ', tag: ['趣味1','趣味2','趣味3'], desc: ['さささ','ししし','すすす'] },
 { name: 'たちつてと', tag: ['趣味1','趣味2'], desc: ['たたた','ちちち'] },
].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>`,"")), "");

もしくはデータのもたせ方を

[
 { name: 'あいうえお', hobby: [['趣味1', 'あああ'], ['趣味2', 'いいい'], ['趣味3', 'ううう']]},
 { name: 'かきくけこ', hobby: [['趣味1', 'かかか'], ['趣味2', 'ききき'], ['趣味3', 'くくく'], ['趣味4', 'けけけ']]}
];


とか

[
 { name: 'あいうえお', hobby: [{'趣味1': 'あああ'}, {'趣味2': 'いいい'}, {'趣味3': 'ううう'}]},
 { name: 'かきくけこ', hobby: [{'趣味1': 'かかか'}, {'趣味2': 'ききき'}, {'趣味3': 'くくく'}, {'趣味4': 'けけけ'}]}
];


としてやれば, 大分HTMLの構造に近づくので処理が行いやすいかと.

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/19 00:29

    早速の回答ありがとうございました。
    一番下の記述方法が分かりやすそうだと思い、script.jsをそう修正した上でhtmlを
    <dl>
    <% _.each(line.hobby, function(val,key) { %>
    <dt><%= val %></dt>
    <dd><%= key %></dd>
    <% }) %>
    </dl>
    と書き換えてみたのですが、全て"[object Object]"とサイト上で表示されてしまいます…
    表示されたリストの数自体はちゃんと人それぞれの数に合致していたので、認識はしてくれたのだと思います。
    あとは内容さえ表示できればまさにしたかった事になるのですが、どこの記述が悪いのか分かりますでしょうか。
    勉強不足で大変申し訳ありません。

    キャンセル

  • 2018/04/19 05:30

    underscore.jsを知らんからなんとも言えんけど, 配列ならいけるんじゃない?

    <dl>
    <% _.each(line.hobby, function(arr) { %>
    <dt><%= arr[0] %></dt>
    <dd><%= arr[1] %></dd>
    <% }) %>
    </dl>
    とかで

    キャンセル

  • 2018/04/20 00:18 編集

    出来ました!!!
    最初は出来ずにサイト表示が止まってしまったのですが、
    リストを真ん中の方法([]をさらに[]でくくる方法)に変えたところその通りになりました!
    本当にありがとうございました!
    今回は大変お世話になりました。お陰でよりよいものが出来そうです。

    キャンセル

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

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15898questions

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

  • HTML

    8663questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6529questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。