２つのCSVを参照し、一致した場合に値をHTMLに出力したい。

Question

前提・実現したいこと

２つのCSVを照らし合わせながら、HTMLにデータを出力したいです。

まず2つのCSVファイルがあります（詳細は後述）。

■list.csv
■master.csv

片方のファイル（list.csv）の特定の列（「番号」の列）の値と、もう片方（master.csv）の特定の列（「番号」の列）の値を比較します。

もし「番号」の値がmaster.csvとlist.csvとで一致するものがあった場合、master.csv側の、一致した値の行に記載しているデータ（「名前」「画像」「URL」）を取得したいです。

また取得したデータは、それぞれliタグで囲ってHTMLに出力したいです。
ただし出力先は後述のように、id「insert1」「insert2」「insert3」「insert4」 と分かれているのですが、これはlist.csvの「表示箇所」に対応しており「表示箇所」がinsert1だった場合、id="insert1"内に出力、insert2だった場合、id="insert2"内に出力・・・というようにできればと考えています。

拙い知識ながら思いつく限り試してみたのですが、
想像どおりに実現することが出来ずにおります。

▼list.csv

	表示箇所	番号
	insert1	000001
	insert2	000002
	insert2	000003
	insert3	000004
	insert3	000005
	insert4	000006
	insert4	000007

▼master.csv
||番号|名前|画像|URL|
|:--|:--:|--:|
||000001|リンゴ|aaa.jpg|aaa.html|
||000002|パイン|bbb.jpg|bbb.html|
||000003|かき|ccc.jpg|ccc.html|
||000004|メロン|ddd.jpg|ddd.html|
||000005|レモン|eee.jpg|eee.html|
||000006|スイカ|fff.jpg|fff.html|
||000007|ドリアン|ggg.jpg|ggg.html|
||000008|みかん|hhh.jpg|hhh.html|
||000009|ぶどう|iii.jpg|iii.html|

<div id="insert1" class="section"></div>
<div id="insert2" class="section"></div>
<div id="insert3" class="section"></div>
<div id="insert4" class="section"></div>

何卒、お力添えいただければ嬉しいです。
宜しくお願いいたします。

###追記
「思いつく限り試してみたのですが」と先述いたしましたが、
現状は以下のようになっております。

(function ($) {

  var readcsvFx = function(){

    var csvMaster;
    var csvList;
    var insert = '';

    //個別CSV
    $.ajax({
      type: 'get',
      url: 'csv/list.csv',
    }).then(
      //通信成功時
      function (dataList) {
        csvList = $.csv()(dataList);

        //商品番号を配列で取得
        var itemPlace_Arr = [];
        var itemNum_Arr = [];
        for (var i = 1; i < csvList.length; i++) {
          var itemPlace = csvList[i][1]; //表示箇所
          var itemNum = csvList[i][2]; //商品番号
          itemPlace_Arr.push(itemPlace);
          itemNum_Arr.push(itemNum);
        }

        //マスターCSV
        $.ajax({
          type: 'get',
          url: 'csv/master.csv',
        }).then(
          //通信成功時
          function (dataMaster) {
            csvMaster = $.csv()(dataMaster);

            insert += '<ul>';
            for (var i = 1; i < csvMaster.length; i++) {
              var itemNum_M = csvMaster[i][2]; //商品番号
              if (itemNum_Arr.indexOf(itemNum_M) >= 0) {
                insert += '<li><ul>';
                insert += '<li>';
                insert += csvMaster[i][2];
                insert += '/li>';
                insert += '<li>';
                insert += csvMaster[i][3];
                insert += '/li>';
                insert += '<li>';
                insert += csvMaster[i][4];
                insert += '/li>';
                insert += '</ul></li>';
              }
            }
            insert += '</ul>';

            for (var j = 1; j < csvList.length; j++) {
              var target;
              if (csvList[j][1] === "insert1") {
                  target = '#insert1';
              } else if (csvList[j][1] === "insert2") {
                  target = '#insert2';
              } else if (csvList[j][1] === "insert3") {
                  target = '#insert3';
              } else if (csvList[j][1] === "insert4") {
                  target = '#insert4';
              }
              console.log(j+ '：' + csvList[j][2]);
              $(target).append(insert);
            }
          },
          //通信失敗時
          function (dataMaster) {
            alert("error");
          }
        );
      },
      //通信失敗時
      function (dataList) {
        alert("error");
      }
    );
  };

  //実行
  $(document).ready(function () {
    readcsvFx();
  });


})(jQuery);

ちなみにCSVの読み込みにはライブラリ「jquery.csv.js」を使用しています。
*配布元が見当たらなくなっております。ご了承ください。

Comments

[退会済みユーザー]

思いつく限り試してみたのであれば、そのときのコードを載せてください。それによってどこで困っているのかがわかるので、みなさんが答えやすくなります。

Answer 1

一致した値の行に記載しているデータ（「名前」「画像」「URL」）を取得したいです。

の仕様次第ですね。結果表示してる（？）HTMLにはそれに類する表示がないので
どうしたいのかがわかりません。

csvをajaxで受け取っているようなのでまずはCSVデータを配列ないしオブジェクトに
置き換えればデータアクセス性が上がると思います

なおcsvはきちんと各データがダブルクォーテーションでくくられていて、
カンマで別れており、改行でデータが別れており、特殊なデータは含まれないという
認識でよいのでしょうか？

できればcsvはテーブル表記ではなく、文字列として例示された方がよいと思います

samplle

仮にすべて配列に収まった状態だとして、listをつかってmasterをフィルタして
結果をresultに受ける処理ならこんな感じです

var list=[
  ["insert1","000001"],
  ["insert2","000002"],
  ["insert2","000003"],
  ["insert3","000004"],
  ["insert3","000005"],
  ["insert4","000006"],
  ["insert4","000007"],
  ];
var master=[
  ["000001","リンゴ","aaa.jpg","aaa.html"],
  ["000002","パイン","bbb.jpg","bbb.html"],
  ["000003","かき","ccc.jpg","ccc.html"],
  ["000004","メロン","ddd.jpg","ddd.html"],
  ["000005","レモン","eee.jpg","eee.html"],
  ["000006","スイカ","fff.jpg","fff.html"],
  ["000007","ドリアン","ggg.jpg","ggg.html"],
  ["000008","みかん","hhh.jpg","hhh.html"],
  ["000009","ぶどう","iii.jpg","iii.html"],
  ];
var result=master.filter(function(x){
  return list.some(function(y){ return y[1]=== x[0];})
});
console.log(result);

Comments

[yaskaa]

ご回答ありがとうございます。このような方法は知りませんでした。
勉強させていただきました。
またCSV表記のご指摘も大変参考となります。今後気をつけて参ります。