【PHP/Ajax/MySQL】ajaxからPHP呼び出し時にエラーが発生する。

前提・実現したいこと

・PHP、Javascript(ajax,datatables)、MYSQLを使って検索サイトを構築しています。
・HTML画面に表示するテーブル構成として、theadは固定にし、
tbodyをajaxを使って条件などを変えたSQLを発行し、データ抽出し、表示させる想定です。
・今はjs(ajax_table.js)のphp呼び出し時にエラーが発生しているように見受けられます。
・datatablesのajaxに関する使い方に問題があると考えていますが、
原因と解決方法をご教授頂けますようお願いいたします。

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

chromeのConsoleより、以下メッセージが表示されます。
Uncaught TypeError: Cannot read property 'length' of undefined

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3  <head>
4 省略
5  </head>
6<body>
7     <table id="sample" class="table  table-bordered table-hover table-responsive table-sm">
8
9       <thead>
10       <tr class="table-primary">
11       <th>苗字</th>
12       <th>名前</th>
13       <th>学年</th>
14       </tr>
15      </thead>
16
17</table>
18
19 省略
20
21<script src="ajax_table.js"></script>

js
1//ajax_table.js
2
3$(document).ready(function() {
4  $.extend( $.fn.dataTable.defaults, {
5     language: {
6         url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json"
7     }
8 });
9      $('#sample').dataTable ({
10        lengthMenu: [ 100, 200, 300, 400, 500 ],
11         "ajax" : {
12         'url' : 'ajax_show_all.php',
13        'datatype' : 'json', //受け取りデータの種類
14        "columns": [
15            { "data": "lastname" },
16            { "data": "firstname" },
17            { "data": "grade" }
18          ]
19           }
20          });
21

php
1//ajax_show_all.php
2<?php
3
4// データベース接続クラスPDOのインスタンス$dbhを作成する
5try {
6    $dbh = new PDO("mysql:host={$host};dbname={$dbname};charset=utf8mb4", $dbuser, $dbpass);
7// PDOExceptionクラスのインスタンス$eからエラーメッセージを取得
8} catch (PDOException $e) {
9    // 接続できなかったらvar_dumpの後に処理を終了する
10    var_dump($e->getMessage());
11    exit;
12}
13
14// データ取得用SQL
15// 値はバインドさせる
16$sql = 'SELECT lastname,firstname,grade FROM tbl where grade in (1,2,3,4)';
17
18// SQLをセット
19$stmt = $dbh->prepare($sql);
20// SQLを実行
21$stmt->execute();
22
23// あらかじめ配列$productListを作成する
24// 受け取ったデータを配列に代入する
25// 最終的にhtmlへ渡される
26$productList = array();
27
28// fetchメソッドでSQLの結果を取得
29// 定数をPDO::FETCH_ASSOC:に指定すると連想配列で結果を取得できる
30// 取得したデータを$productListへ代入する
31while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
32    $productList[] = array(
33      'lastname' => $row['lastname'],
34      'firstname' => $row['firstname'],
35      'grade' => $row['grade']
36
37    );
38}
39
40// ヘッダーを指定することによりjsonの動作を安定させる
41 header('Content-type: application/json');
42// htmlへ渡す配列$productListをjsonに変換する
43 echo json_encode($productList,JSON_UNESCAPED_UNICODE);
44

試したこと

原因切り分けとして、jsファイルの「'ajax_show_all.php'」部分を
phpファイルから返却される予定の仮データ（jsonファイル）に置き換えると、上手く表示されました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

Ajaxから実行しているPHPのほうでエラーが出ていたりしていませんか？デバッグ・エラーログ確認してみてください。
PHPからの出力にJSONデータ以外が入り込んでいてJSONが正しく生成されず、lengthが正しくとれずに提示のエラーとなっているように思います。

あとはその「予定の仮データ」とは階層が違うとか。

投稿2019/05/02 21:07

m.ts10806

総合スコア80850

teltelboy

2019/05/03 00:59 編集

ご回答ありがとうございます。ご指摘の通り、仮データとPHPからの返却データのデータ形式が違うためにエラーとなっていることがわかりました。具体的には以下の通りです。"data"部分です。 ①仮データ(jsonファイル) { "data":[ {"lastname": "テストA", "firstname": "テストA", "grade": "4"}, {"lastname": "テストB", "firstname": "テストB", "grade": "4"} ] } ②ajax_show_all.phpから返却されるデータ [ {"lastname":"テストA","firstname":"テストA","grade":"4"}, {"lastname":"テストB","firstname":"テストB","grade":"4"} ] 対処として、②に何らかの方法で"data"構造を付与するか、 ajaxが②(columns定義部分？)で受け取れるようにするかだと考えているのですが、具体的な実装方法がわかりませんでした。おわかるになるようでしたら、教えて頂けないでしょうか。参考として、①はdatatablesサイトのexamplesをベースにした結果です。 https://datatables.net/examples/ajax/objects.html

m.ts10806

2019/05/03 01:49

でしたら連想配列1個追加するだけですね。 echo json_encode($productList,JSON_UNESCAPED_UNICODE); ↓ echo json_encode(['data'=>$productList],JSON_UNESCAPED_UNICODE); か、 $productList = array(); ↓ $productList = []; $productList['data'] = []; ※[] はarray()の短縮構文でPHP5.4以降でしたらこちらが主流です https://qiita.com/tadsan/items/157969b338fd8b782b21 #配列はarrayで作る

teltelboy

2019/05/03 03:05 編集

コメント頂いたやり方で無事にajaxでデータを受け取れ、画面表示までできました。大変助かりました。ありがとうございました。

m.ts10806

2019/05/03 04:17

解決されたようで何よりです。配列も多次元になると形が見えにくくなるものですが、箱に入れていくイメージで丁寧に考察していくと案外単純なことの繰り返しなので、あとは慣れだけと思います

行動規範の内容に同意します