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

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

新規登録して質問してみよう
ただいま回答率
85.44%
CSV

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

JavaScript

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

jQuery

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

Ajax

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

Q&A

解決済

1回答

1383閲覧

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

yaskaa

総合スコア8

CSV

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

JavaScript

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

jQuery

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

Ajax

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

0グッド

0クリップ

投稿2018/02/28 08:25

編集2018/02/28 08:53

前提・実現したいこと

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

表示箇所番号
insert1000001
insert2000002
insert2000003
insert3000004
insert3000005
insert4000006
insert4000007

▼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

1<div id="insert1" class="section"></div> 2<div id="insert2" class="section"></div> 3<div id="insert3" class="section"></div> 4<div id="insert4" class="section"></div>

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

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

javascript

1(function ($) { 2 3 var readcsvFx = function(){ 4 5 var csvMaster; 6 var csvList; 7 var insert = ''; 8 9 //個別CSV 10 $.ajax({ 11 type: 'get', 12 url: 'csv/list.csv', 13 }).then( 14 //通信成功時 15 function (dataList) { 16 csvList = $.csv()(dataList); 17 18 //商品番号を配列で取得 19 var itemPlace_Arr = []; 20 var itemNum_Arr = []; 21 for (var i = 1; i < csvList.length; i++) { 22 var itemPlace = csvList[i][1]; //表示箇所 23 var itemNum = csvList[i][2]; //商品番号 24 itemPlace_Arr.push(itemPlace); 25 itemNum_Arr.push(itemNum); 26 } 27 28 //マスターCSV 29 $.ajax({ 30 type: 'get', 31 url: 'csv/master.csv', 32 }).then( 33 //通信成功時 34 function (dataMaster) { 35 csvMaster = $.csv()(dataMaster); 36 37 insert += '<ul>'; 38 for (var i = 1; i < csvMaster.length; i++) { 39 var itemNum_M = csvMaster[i][2]; //商品番号 40 if (itemNum_Arr.indexOf(itemNum_M) >= 0) { 41 insert += '<li><ul>'; 42 insert += '<li>'; 43 insert += csvMaster[i][2]; 44 insert += '/li>'; 45 insert += '<li>'; 46 insert += csvMaster[i][3]; 47 insert += '/li>'; 48 insert += '<li>'; 49 insert += csvMaster[i][4]; 50 insert += '/li>'; 51 insert += '</ul></li>'; 52 } 53 } 54 insert += '</ul>'; 55 56 for (var j = 1; j < csvList.length; j++) { 57 var target; 58 if (csvList[j][1] === "insert1") { 59 target = '#insert1'; 60 } else if (csvList[j][1] === "insert2") { 61 target = '#insert2'; 62 } else if (csvList[j][1] === "insert3") { 63 target = '#insert3'; 64 } else if (csvList[j][1] === "insert4") { 65 target = '#insert4'; 66 } 67 console.log(j+ ':' + csvList[j][2]); 68 $(target).append(insert); 69 } 70 }, 71 //通信失敗時 72 function (dataMaster) { 73 alert("error"); 74 } 75 ); 76 }, 77 //通信失敗時 78 function (dataList) { 79 alert("error"); 80 } 81 ); 82 }; 83 84 //実行 85 $(document).ready(function () { 86 readcsvFx(); 87 }); 88 89 90})(jQuery);

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/28 08:36

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

回答1

0

ベストアンサー

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

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

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

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

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

samplle

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

javascript

1var list=[ 2 ["insert1","000001"], 3 ["insert2","000002"], 4 ["insert2","000003"], 5 ["insert3","000004"], 6 ["insert3","000005"], 7 ["insert4","000006"], 8 ["insert4","000007"], 9 ]; 10var master=[ 11 ["000001","リンゴ","aaa.jpg","aaa.html"], 12 ["000002","パイン","bbb.jpg","bbb.html"], 13 ["000003","かき","ccc.jpg","ccc.html"], 14 ["000004","メロン","ddd.jpg","ddd.html"], 15 ["000005","レモン","eee.jpg","eee.html"], 16 ["000006","スイカ","fff.jpg","fff.html"], 17 ["000007","ドリアン","ggg.jpg","ggg.html"], 18 ["000008","みかん","hhh.jpg","hhh.html"], 19 ["000009","ぶどう","iii.jpg","iii.html"], 20 ]; 21var result=master.filter(function(x){ 22 return list.some(function(y){ return y[1]=== x[0];}) 23}); 24console.log(result); 25

投稿2018/03/01 02:53

編集2018/03/01 03:06
yambejp

総合スコア115273

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yaskaa

2018/03/02 09:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問