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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

2058閲覧

PHPで取り込んだCSVデータのなかから、特定の文字の出現回数をカウントしたい

luckysamurai

総合スコア8

CSV

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/09/18 06:48

編集2017/09/18 10:15

###前提・実現したいこと

(大目的)
PHPで取り込んだCSVデータのなかから、特定の文字の出現回数をカウントしたいと思っています。
*アンケート集計

(いま取り組んでいること)
CSVに直接アクセスして集計することを断念して、一度csvのデータをhtmlに表示させて、その表示された内容をカウントすることに挑戦しています。

###発生している問題・エラーメッセージ

1:csvファイルをhtmlにtable形式で表示させるjQuery「CSVToTable」を利用しました。(成功)
ライブラリ
https://code.google.com/archive/p/jquerycsvtotable/

2:htmlに表示されたデータの中から、特定のKWの出現回数をカウントするために、jQueryの「$("要素指定:contains('特定の文字')").length;」を利用したのですが、うまくカウントできません。

###該当のソースコード

<?php function h($str){ return htmlspecialchars($str,ENT_QUOTES); } // 受け取ったデータを変数で定義 $age = $_POST["age"]; $salary = $_POST["salary"]; $comfort = $_POST["comfort"]; $pref = $_POST["pref"]; // 書き込み処理 $file = fopen("data/data.csv","a"); // ファイル読み込み flock($file, LOCK_EX); // ファイルロック fputcsv($file, $_POST); // csvで書き込み flock($file, LOCK_UN); // ファイルロック解除 fclose($file); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <title>アンケート結果</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.csvToTable.js"></script> <!--[if lt IE ]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <[endif]--> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> <div id="donutchart2" style="width: 900px; height: 500px;"></div> <div id="donutchart3" style="width: 900px; height: 500px;"></div> <!-- ローデータを表示させるjQuery の表示指定 --> <div class="table_csv"></div> <!-- ローデータを表示させるjQuery --> <script> $(function(){ $(".table_csv").CSVToTable("data/data.csv", { headers: ['年齢','年収','満足度','勤務地'], //headerオプション } ); }); </script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // 各グラフの数値を計算する変数を指定 var cntAge20 = $("td:contains('20代')").length;// var cntAge30 = $("td:contains('30代')").length; var cntAge40 = $("td:contains('40代')").length; var cntAge50 = $("td:contains('50代以上')").length; // console.log(cntTest); console.log(cntAge20); console.log(cntAge30); console.log(cntAge40); console.log(cntAge50); // 各グラフを表示させるプログラム google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Share'], ['20代', cntAge20], ['30代', cntAge30], ['40代', cntAge40], ['50代以上', cntAge50], ]); var data2 = google.visualization.arrayToDataTable([ ['Salary', 'Share'], ['300万ー350万', 11], //数字仮置き ['351万ー400万', 2], //数字仮置き ['400万ー450万', 2], //数字仮置き ['451万ー500万', 2], //数字仮置き ['500万以上', 2], //数字仮置き ]); var data3 = google.visualization.arrayToDataTable([ ['Comfort', 'Share'], ['大変満足', 11], //数字仮置き ['まあまあ満足', 2], //数字仮置き ['やや不満', 2], //数字仮置き ['かなり不満', 2], //数字仮置き ]); var options1 = { title: '年齢', pieHole: 0.4, }; var options2 = { title: '年収', pieHole: 0.4, }; var options3 = { title: '満足度', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options1); var chart2 = new google.visualization.PieChart(document.getElementById('donutchart2')); chart2.draw(data2, options2); var chart3 = new google.visualization.PieChart(document.getElementById('donutchart3')); chart3.draw(data3, options3); } </script> </body> </html>

###試したこと
参考にしたサイトURL
http://www.jquerystudy.info/reference/miscellaneous/length.html
https://lab.sonicmoov.com/markup/jquery/jquery-selectors/

###補足情報(言語/FW/ツール等のバージョンなど)

(追記)
まだ解決していませんが、「CSVToTable」によってhtmlに表記されたtableタグの内容を、そのままコピーしてhtmlに直書き(ペースト)したところ、

var cntAge20 = $("td:contains('20代')").length;

が正常にカウントしはじめました。

「CSVToTable」によって書き出されるタグを、

var cntAge20 = $("td:contains('20代')").length;

が認識できていないのかもしれません。

(追記2)

フォームのページのソースを記載しました。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <title>満足度アンケート</title> <!-- <link rel="stylesheet" type="text/css" href="css/reset.css" /> --> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if lt IE ]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <[endif]--> </head> <body> <h1>満足度アンケート</h1> <form action="output_data.php" method="post" accept-charset="utf-8"> <!-- <p>ニックネーム:<input id="" type="text" name="name" value=""></p> <p>Email:<input id="" type="text" name="email" value=""></p> --> <p>年齢:<select name="age"> <option value="">年齢を選んでください <option value="20代">20代 <option value="30代">30代 <option value="40代">40代 <option value="50代以上">50代以上</select> </p> <p>年収:<select name="salary"> <option value="">現在の年収を選んでください。 <option value="300万ー350万">300万ー350万 <option value="351万ー400万">351万ー400万 <option value="400万ー450万">400万ー450万 <option value="451万ー500万">451万ー500万 <option value="500万以上">500万以上 </select> </p> <p>現在の仕事に満足していますか?:<select name="comfort"> <option value="">満足レベルを選んでください。 <option value="大変満足している">大変満足している <option value="まあまあ満足している">まあまあ満足している <option value="やや不満">やや不満 <option value="かなり不満">かなり不満 </select> </p> <p>勤務地を選んでください。:<select name="pref"> <option value="">都道府県 <option value="北海道">北海道 <option value="青森県">青森県 <option value="岩手県">岩手県 <option value="宮城県">宮城県 <option value="秋田県">秋田県 <option value="山形県">山形県 <option value="福島県">福島県 <option value="茨城県">茨城県 <option value="栃木県">栃木県 <option value="群馬県">群馬県 <option value="埼玉県">埼玉県 <option value="千葉県">千葉県 <option value="東京都" selected="">東京都 <option value="神奈川県">神奈川県 <option value="新潟県">新潟県 <option value="富山県">富山県 <option value="石川県">石川県 <option value="福井県">福井県 <option value="山梨県">山梨県 <option value="長野県">長野県 <option value="岐阜県">岐阜県 <option value="静岡県">静岡県 <option value="愛知県">愛知県 <option value="三重県">三重県 <option value="滋賀県">滋賀県 <option value="京都府">京都府 <option value="大阪府">大阪府 <option value="兵庫県">兵庫県 <option value="奈良県">奈良県 <option value="和歌山県">和歌山県 <option value="鳥取県">鳥取県 <option value="島根県">島根県 <option value="岡山県">岡山県 <option value="広島県">広島県 <option value="山口県">山口県 <option value="徳島県">徳島県 <option value="香川県">香川県 <option value="愛媛県">愛媛県 <option value="高知県">高知県 <option value="福岡県">福岡県 <option value="佐賀県">佐賀県 <option value="長崎県">長崎県 <option value="熊本県">熊本県 <option value="大分県">大分県 <option value="宮崎県">宮崎県 <option value="鹿児島県">鹿児島県 <option value="沖縄県">沖縄県 </select></p> <input id="" type="submit" name="" value="送信"> </form> </body> </html>

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

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

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

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

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

kei344

2017/09/18 08:17

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)また、提示のコードではCSVToTableが使われていません。
luckysamurai

2017/09/18 08:26

kei344 様 ご指摘ありがとうございます。追記修正しました。こちらでいかがでしょうか?よろしくお願いいたします!
kei344

2017/09/18 08:36

GitHubのリンク先と提示のコードで、CSVToTable自体の使い方が違うようです。何か別のものと勘違いされていたりしませんか?リンク先はコマンドラインで出力するためのツールで、書かれているコードはjQueryプラグインとして動かしています。
luckysamurai

2017/09/18 08:46

kei344 様 失礼しました。ライブラリのリンク先を変更しました。フォローありがとうございます。
m.ts10806

2017/09/18 09:16

PHP部分はないんですかね。
luckysamurai

2017/09/18 09:43

ありがとうございます。PHP部分も含めてすべて記載しました。もう一つ別のファイルで、アンケートフォームのページがあります。そこからPOSTされたのが今回のファイルです。
m.ts10806

2017/09/18 09:57

そのフォームページのソースも提示された方が良いかと思います。
luckysamurai

2017/09/18 10:15

掲載しました。お手数おかけします。
guest

回答1

0

ベストアンサー

描画の完了を待ってからでないと読みとれないのでは。あと、提示のスクリプトは{}の対応が取れていないような気がします。

JavaScript

1$( '.table_csv' ).on( 'loadComplete', function() { 2 /* この中で:containsとかのコードを書く */ 3 4// 各グラフの数値を計算する変数を指定 5 /* 以下省略 */ 6} );

投稿2017/09/18 13:09

kei344

総合スコア69364

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

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

luckysamurai

2017/09/18 13:27

kei344 様  まさにご指摘の通りでした! いただいたコードで囲うことで、しっかり動き出しました! 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問