CSVファイルにて、特定の項目がもつ複数の値を取得+出力したい。【連想配列/配列/ループ処理/ループの中のループ処理？】

Question

前提条件

CSVファイルを作成→gulpでJSONデータに変換→EJSで読み込む→HTMLに出力
という流れで現在制作をしています。

やりたいこと

項目が複数あるうち、一つの項目**(※項目5)**だけが値を複数もっています。
その複数の値をひとつずつループさせて出力したい。
カンマ区切りでばらばらにして配列にするところまでできているが
取得の仕方がわからない。
(説明が分かりづらいと思うので、下記の①～④をご確認ください。)

①CSVファイルのイメージ

項目5はカンマ区切りになっていて、
これをひとつひとつバラして出力したい。
(今回はサンプルとして3行だけ用意しています。項目5の個数は行によって異なります。)

②EJS(項目5が出力できていないejs)

<% for(var i = 0;i < sample.length;i++) { %>
<a href="<%- sample[i]['項目1'] %>" class="p-new-item hover-opacity">
  <div class="p-new-item__mod">
  <p><%- sample[i]['項目2'] %><span><%- sample[i]['項目3'] %></span></p>

    <ul class="p-new-item__category">
      <li class="category-item"><% ここに、項目5にある分だけの値を取得＆出力したい %></li>
    </ul>
  </div>
  <p class="p-new-item__btn"><%- sample[i]['項目4'] %></p>
</a>
<% } %>

③JSON(sampleという名前でejsと連携させています)

[{"項目1":"一週目：項目1の内容","項目2":"一週目：項目2の内容","項目3":"一週目：項目3の内容","項目4":"一週目：項目4の内容","項目5":"項目5-1,項目5-2,項目5-3"},{"項目1":"二週目：項目1の内容","項目2":"二週目：項目2の内容","項目3":"二週目：項目3の内容","項目4":"二週目：項目4の内容","項目5":"項目5-2-1,項目5-2-2,項目5-2-3"},{"項目1":"三週目：項目1の内容","項目2":"三週目：項目2の内容","項目3":"三週目：項目3の内容","項目4":"三週目：項目4の内容","項目5":"項目5-3-1,項目5-3-2,項目5-3-3"}]

④成功イメージHTML

※該当ソースをteratail用に修正しているのでタグの使い方ミスやclass名の揺れは一旦無視してください。

<a href="一週目：項目1の内容" class="p-new-item hover-opacity">
  <div class="p-new-item__mod">
  <p>一週目：項目2の内容<span>一週目：項目3の内容</span></p>
    <ul class="p-new-item__category">
      <li class="category-item">項目5-1</li>//例が悪いのですが、この「.category-item」の数は変化する
      <li class="category-item">項目5-2</li>
      <li class="category-item">項目5-3</li>
    </ul>
  </div>
  <p class="p-new-item__btn">一週目：項目4の内容</p>
</a>
<a href="二週目：項目1の内容" class="p-new-item hover-opacity">
  <div class="p-new-item__mod">
  <p>二週目：項目2の内容<span>二週目：項目3の内容</span></p>
    <ul class="p-new-item__category">
      <li class="category-item">項目5-2-1</li>//例が悪いのですが、この「.category-item」の数は変化する
      <li class="category-item">項目5-2-2</li>
      <li class="category-item">項目5-2-3</li>
    </ul>
  </div>
  <p class="p-new-item__btn">二週目：項目4の内容</p>
</a>
<a href="三週目：項目1の内容" class="p-new-item hover-opacity">
  <div class="p-new-item__mod">
  <p>三週目：項目2の内容<span>三週目：項目3の内容</span></p>
    <ul class="p-new-item__category">
      <li class="category-item">項目5-3-1</li>//例が悪いのですが、この「.category-item」の数は変化する
      <li class="category-item">項目5-3-2</li>
      <li class="category-item">項目5-3-3</li>
    </ul>
  </div>
  <p class="p-new-item__btn">三週目：項目4の内容</p>
</a>

ためしたこと

                <ul class="p-new-item__category">
                  <% var str = sample[i]['項目5'];
                  var arr = str.split(',');       
                  %>
                    <li class="category-item"><%- arr[0] %></li>
                </ul>
//=>これで<%- arr[0] %>、<%- arr[1] %>・・・と記載していくと希望通りの形になりますが
今回個数が固定になっていないので不採用。

for(var i = 0;i < sample.length;i++) { %>
<%- arr[i] %>
//=>1行分のみのループ+3行分の項目5分をループしている

for(var i = 0;i < arr.length;i++) { 
arr[i]
//=>ループが終わらない

※該当ソースをteratail用に修正しているのでタグの使い方ミスやclass名の揺れは一旦無視してください。

jsの問題かと思いますが、
アドバイスいただければ助かります。
よろしくお願いいたします。

Answer 1

ejsというものの仕様を理解していないのですがdom的にやればこう？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var json=[{"項目1":"一週目：項目1の内容","項目2":"一週目：項目2の内容","項目3":"一週目：項目3の内容","項目4":"一週目：項目4の内容","項目5":"項目5-1,項目5-2,項目5-3"},{"項目1":"二週目：項目1の内容","項目2":"二週目：項目2の内容","項目3":"二週目：項目3の内容","項目4":"二週目：項目4の内容","項目5":"項目5-2-1,項目5-2-2,項目5-2-3"},{"項目1":"三週目：項目1の内容","項目2":"三週目：項目2の内容","項目3":"三週目：項目3の内容","項目4":"三週目：項目4の内容","項目5":"項目5-3-1,項目5-3-2,項目5-3-3"}];
  json.forEach(x=>{
    var a=document.createElement('a');
    document.querySelector('#hoge').appendChild(a);
    a.setAttribute('href',x["項目1"]);
    a.setAttribute('class','p-new-item hover-opacity');
    var div=document.createElement('div');
    a.appendChild(div);
    div.setAttribute('class','p-new-item__mod');
    var p=document.createElement('p');
    div.appendChild(p);
    var span=document.createElement('span');
    p.appendChild(span);
    span.appendChild(document.createTextNode(x["項目3"]));
    p.appendChild(document.createTextNode(x["項目2"]));
    var ul=document.createElement('ul');
    div.appendChild(ul);
    ul.setAttribute('class','p-new-item__category');
    x["項目5"].split(",").forEach(y=>{
      var li=document.createElement('li');
      ul.appendChild(li);
      li.setAttribute('class','category-item');
      li.appendChild(document.createTextNode(y));
    });
    var p=document.createElement('p');
    a.appendChild(p);
    p.setAttribute('class','p-new-item__btn');
    p.appendChild(document.createTextNode(x["項目4"]));
  });
});

</script>
<div id="hoge"></div>

Comments

[kitty]

ご返信を見落としておりました。遅くなってすみません。
結局、jQueryのemptyメソッドを使用しました。(一度、項目5の最大個数分ループさせて出力→最大個数よりも少ない場合は中身が空のli.category-itemが発生→それをemptyで削除)
無理矢理で汎用性はありませんが、今回は手短に済ませることにしました。

今回ご教示いただいたものは使用しませんでしたが、確かにこれでしたら希望通りの出力が出来そうですね。
次回の参考にさせていただきます。