質問編集履歴

1 JS部分を追記いたしました。

yaskaa

yaskaa score 6

2018/02/28 17:53  投稿

2つのCSVを参照し、一致した場合に値をHTMLに出力したい。
### 前提・実現したいこと
2つの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|
```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>
```
何卒、お力添えいただければ嬉しいです。
宜しくお願いいたします。
宜しくお願いいたします。
###追記
「思いつく限り試してみたのですが」と先述いたしましたが、
現状は以下のようになっております。
```javascript
(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」を使用しています。
*配布元が見当たらなくなっております。ご了承ください。
  • JavaScript

    22676 questions

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

  • jQuery

    8949 questions

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

  • Ajax

    1453 questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

  • CSV

    1000 questions

    CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る