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

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

ただいまの
回答率

90.32%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,081

yaskaa

score 6

 前提・実現したいこと

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
<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」を使用しています。
*配布元が見当たらなくなっております。ご了承ください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    退会済みユーザー

    2018/02/28 17:36

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

    キャンセル

回答 1

checkベストアンサー

+2

一致した値の行に記載しているデータ(「名前」「画像」「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);

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/03/02 18:42

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

    キャンセル

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

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

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