js,php Error fetching data: SyntaxError: Unexpected token '<', " "... is not valid JSON

実現したいこと

fullcalendarにmysqlのデータを表示させたい。
エラーの解決

発生している問題・分からないこと

fullcalendarにmysqlのデータを表示させたいのですがエラーが出てしまっています。

エラーメッセージ

error
1calender.js:57 Error fetching data: SyntaxError: Unexpected token '<', "<br />
2<b>"... is not valid JSON
3（匿名）	@	calender.js:57
4Promise.catch（非同期）		
5（匿名）	@	calender.js:56

該当のソースコード

content.php
1<?php 
2//http://localhost/partshift/content/content.php
3?>
4
5<?PHP
6session_start();
7
8// ログイン済みかどうかを確認
9if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
10    header("location: ../login/login.php");
11    exit;
12}
13
14
15//データベース接続　龍の目
16require('../dbconnect.php');
17
18// ユーザー情報の取得クエリ
19$sql = "SELECT e.name, r.role_name
20        FROM employees e
21        JOIN roles r ON e.role_id = r.role_id
22        WHERE e.employee_code = ?";
23
24if($stmt = $db->prepare($sql)){
25    
26    // パラメータをバインド
27    $employee_code = $_SESSION["employee_code"]; 
28    $stmt->bindParam(1, $employee_code, PDO::PARAM_STR);
29
30    // クエリの実行
31    if($stmt->execute()){
32        // 結果を取得
33        $row = $stmt->fetch(PDO::FETCH_ASSOC);
34        if ($row) {
35            $name = $row['name'];
36            $role = $row['role_name'];
37        }
38    } 
39}
40// データベース接続を閉じる
41$db = null;
42?>
43
44
45
46
47<!DOCTYPE html>
48<html lang="ja" class="is-overflow">
49<head>
50    <meta charset="UTF-8">
51    <meta name="viewport" content="width=device-width, initial-scale=1.0">
52    <title>ログインページ</title>
53    <link rel="stylesheet" href="index02.css">
54    <script src="calender.js"></script>
55    
56    <script src='https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@6.1.11/index.global.min.js'></script>
57    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
58    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
59    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.0/main.min.js"></script>
60
61</head>
62
63<body>
64<div class="htmlContainer">
65<!-- header -->
66    <div id="user_name">
67        <div class="user_fixed">
68            <p class="user_greeting">お疲れ様です！ 役職<?php echo htmlspecialchars($role); ?>  <?php echo htmlspecialchars($name); ?> さん</p>            
69        </div>
70    </div>
71
72    <main>
73        <div class="container">
74            <h1>スケジュール</h1>
75        </div>
76        <div id="cale" style="padding: 10px 10px;">
77        <div id='calendar'></div>
78        </div>
79    </main>
80
81    <footer>
82    <div class="footer">
83        <p>&copy; 2024 My Website</p>
84    </div>
85    </footer>
86
87</div>
88</body>
89</html>

calender.js
1document.addEventListener('DOMContentLoaded', function() {
2  var calendarEl = document.getElementById('calendar');
3
4  fetch('getShifts.php')
5    .then(response => response.json())
6    .then(data => {
7      var calendar = new FullCalendar.Calendar(calendarEl, {
8        headerToolbar: {
9          left: 'prev,next today',
10          center: 'title',
11          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
12        },
13        buttonText: {
14          prev: '先月',
15          next: '来月',
16          today: '今日',
17          dayGridMonth: '月',
18          timeGridWeek: '週',
19          timeGridDay: '日',
20          listMonth: 'リスト',
21        },
22        locale: 'ja',
23        timeZone: 'Asia/Tokyo',
24        eventLimit: true,
25        navLinks: true,
26        editable: true,
27        dayMaxEvents: true, // for all non-TimeGrid views
28        views: {
29          timeGrid: {
30            dayMaxEventRows: 4 // adjust to 6 only for timeGridWeek/timeGridDay
31          }
32        },
33        selectable: true,
34        plugins: ['dayGrid', 'timeGrid', 'interaction', 'list'],
35        initialView: 'dayGridMonth',
36        events: function(info, successCallback, failureCallback) {
37          // infoオブジェクトを使用して日付の範囲を取得
38          setCalendarList(info.startStr, info.endStr, successCallback);
39        },
40        eventClick: function(info) {
41          // カレンダーに設定したイベントクリック時のイベント
42        },
43        dateClick: function(info) {
44          // カレンダー空白部分クリック時のイベント
45        },
46        select: function(info) {
47          // カレンダー空白部分をドラッグして範囲指定した時のイベント
48        },
49        eventDrop: function(info) {
50          // イベントをドラッグして別日に移動させた時のイベント
51        }
52      });
53
54      calendar.render();
55    })
56    .catch(error => {
57      console.error('Error fetching data:', error);
58    });
59});
60
61/**
62 * 対象日付スケジュールデータセット処理
63 * @param {string} startStr - 開始日付
64 * @param {string} endStr - 終了日付
65 * @param {function} successCallback - 成功時のコールバック関数
66 * @returns {undefined}
67 */
68function setCalendarList(startStr, endStr, successCallback) {
69  $.ajax({
70    type: 'post',
71    dataType: "json",
72    async: true,
73    cache: false,
74    url: 'getScheduleList.php',
75    data: {
76      startDate: startStr,
77      endDate: endStr
78    }
79  })
80  .then(function(data) {
81    var events = [];
82
83    // 取得したデータをフルカレンダーのイベント形式に整形
84    $.each(data, function(index, value) {
85      events.push({
86        id: value['id'],
87        title: value['title'],
88        description: value['description'],
89        start: value['start'],
90        end: value['end'],
91        color: value['color'],
92        textColor: value['textColor']
93      });
94    });
95
96    // 成功時のコールバック関数にイベントを渡す
97    successCallback(events);
98  })
99  .catch(error => {
100    console.error('Error in setCalendarList:', error);
101    // 失敗時の処理をここに記述することもできます
102  });
103
104  return;
105}
106

getShift.php
1<?php
2// データベースの設定情報を定義します。
3$servername = "localhost";
4$username = "";
5$password = "";
6$dbname = "";
7
8// PDOを使用してデータベースに接続します。
9// PDOはエラー処理やセキュリティ（プリペアドステートメント）などの面でmysqliより推奨されます。
10try {
11    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
12    // エラーモードを例外モードに設定
13    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
14} catch (PDOException $e) {
15    die("Connection failed: " . $e->getMessage());
16}
17
18// スケジュールデータを取得するクエリを定義します。
19$sql = "SELECT id, title, description, start_date, start_time, end_date, end_time, calendar_color, calendar_text_color FROM schedules WHERE start_date >= :startDate AND end_date <= :endDate";
20
21// パラメータをバインドしてクエリを実行します。
22$startDate = $_GET['startDate'] ?? date('Y-m-d');
23$endDate = $_GET['endDate'] ?? date('Y-m-d');
24$stmt = $conn->prepare($sql);
25$stmt->bindParam(':startDate', $startDate);
26$stmt->bindParam(':endDate', $endDate);
27$stmt->execute();
28
29// クエリ結果を配列に格納します。
30$scheduleList = $stmt->fetchAll(PDO::FETCH_ASSOC);
31
32// データベース接続を閉じます（PDOでは接続閉じる必要は基本的にありませんが、明示的に閉じたい場合はnullを代入します）
33$conn = null;
34
35// JSON形式でレスポンスを返します。
36header('Content-Type: application/json');
37echo json_encode($scheduleList);
38?>
39

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

色々調べて試行錯誤しましたがどれも解決に至りませんでした。

補足

windows XAMPP vscode

まだプログラミング始めたばかりで色々いたらない点もありますがご教授願います。
もっと詳細な情報が必要な場合はどうぞご気軽にコメントしてください。
よろしくお願いします。

Lhankor_Mhy

2024/04/04 04:20

getShift.php に startDate などを渡してなくないですか？

Umi_0w0

2024/04/04 04:33

コメントありがとうございます。 getShift.php に startDate などを渡してなくないですか？というのはどういうことでしょうか？私の知識不足で理解することができないのですが”$sql”でデータを取得してその後、$startDateや$stmt で定義しているのではないのですか？ご教授よろしくお願いします！

Lhankor_Mhy

2024/04/04 04:36

fetch('getShifts.php') というコードには startDate というパラメータが含まれていないのではないですか？　という疑問ですので、「ここで渡してるじゃないですか！」という部分があればお知らせください。

Umi_0w0

2024/04/04 04:41

コメントありがとうございます。 fetch('getShifts.php')には直接的にstartDateのパラメータが含まれていません。ただし、PHPのコード内で$_GET['startDate']を使用しており、クエリ文字列からstartDateの値を取得し、それを使ってSQLクエリを実行しています。これだといけないのでしょうか？

Lhankor_Mhy

2024/04/04 04:44

そのクエリ文字列はどこで作っているのか読み取ることができないでいます。

Lhankor_Mhy

2024/04/04 04:46

maisumakun さんのご回答のコメントを読みました。そもそもそれ以前のエラーのようですね。忘れてください。

Umi_0w0

2024/04/04 04:48

すみません、解答ありがとうございます。ほかに何かあれば教えていただきたいです。

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

回答2件

具体的にどこでエラーがでているかによります
コンソール上でエラーの行番号が表示されると思うのでそちらで検証することになりそうです
仮にjsのfetchの前後のエラーということであれば

javascript
1  fetch('getShifts.php')
2    .then(response => response.json())
3    ・・・
4↓↓↓
5  fetch('getShifts.php')
6    .then(response => response.text())
7    .then(console.log)

として確認することができます

投稿2024/04/04 04:20

yambejp

総合スコア117615

Umi_0w0

2024/04/04 04:38

回答ありがとうございます。コンソール上だとcalendar.jsの56.57行目にエラーが出ているようです。 .catch(error => { console.error('Error fetching data:', error); この部分は、確かfetchメソッドが失敗した場合にエラーをキャッチして処理するためのものですよね？この場合はどうエラーログを調べればいいのですか？

yambejp

2024/04/04 05:04

エラーをキャッチしているようなのでJSONの変換エラーじゃないですかねぇ回答した通り戻り値をjsonではなくtextで受け取ってみて不正なJSONになっていないか確認してみてください（可能であれば、質問にテキストとしての戻り値を追記するとか・・・）

Umi_0w0

2024/04/04 05:13

回答ありがとうございます。 getShifts.phpとmysqlのカラム名の違いによりエラーが出ていた模様です。お付き合いいただきありがとうございます。非常に参考になりました。

yambejp

2024/04/04 05:16

参考「SyntaxError: Unexpected token」 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Unexpected_token

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

ベストアンサー

ブラウザの検証ツールのNetworkタブから、実際にどんなデータが返ってきているか確認しましょう。

おそらくは、JSON以外に、PHPの吐き出すエラーメッセージが混ざって、JSONとしてのパースに失敗しているものと思われます。

投稿2024/04/04 04:09

maisumakun

総合スコア146530

maisumakun

2024/04/04 04:10

エラーメッセージは、PHP側の問題を修正する手がかりとなります。

Umi_0w0

2024/04/04 04:15

回答ありがとうございます。試してみました。そうしたらmain.min.jsのステータスコードが404 Not Found になっていました。この場合どの辺りに原因がありそうでしょうか？

maisumakun

2024/04/04 04:18 編集

> そうしたらmain.min.jsのステータスコードが404 Not Found になっていました。 fetch('getShifts.php')の中身を確認して欲しい、という状況なので、（特に何も変更せずに確認しただけなら）その404は別件です。

Umi_0w0

2024/04/04 04:25

すみません、試してみました。 getShifts.phpを押してヘッダーのとこを見てみましたがそこは大丈夫そうです。次にgetShifts.phpのプレビューを見てみたらエラーメッセージが書かれていました。 Fatal error: Uncaught PDOException: SQLSTATE[42S02]: Base table or view not found: 1146 Table 'ptjs_.schedules' doesn't exist in C:\xampp\htdocs\partshift\content\getShifts.php:27 Stack trace: #0 C:\xampp\htdocs\partshift\content\getShifts.php(27): PDOStatement->execute() #1 {main} thrown in C:\xampp\htdocs\partshift\content\getShifts.php on line 27 まず調べるものはこれであっていますか？また解決策がある場合アドバイスお願いします。

maisumakun

2024/04/04 04:36

> まず調べるものはこれであっていますか？そうですね、エラーメッセージを読んでテーブル構造とそれを参照する側に問題がないか確認してみましょう。

Umi_0w0

2024/04/04 04:46

回答ありがとうございます。 $sql = "SELECT id, title, description, start_date, start_time, end_date, end_time, calendar_color, calendar_text_color FROM schedules WHERE start_date >= :startDate AND end_date <= :endDate"; このgetShift.phpの　FROM schedules　をFROM shifts に変更したらこのエラーは亡くなりました。しかし元々の質問であるエラーの方は以前残ったままなのですが、次はどこを見たらいいでしょうか？この場合どの辺りに原因がありそうでしょうか？

maisumakun

2024/04/04 04:48

同じくunexpected tokenと出続けるのですか？

Umi_0w0

2024/04/04 04:50

その通りです。コンソール上に Error fetching data: SyntaxError: Unexpected token '<', " "... is not valid JSON このエラー文は出たままです。。。

maisumakun

2024/04/04 04:54

fetch('getShifts.php')はきちんとJSONを返せていますか？

Umi_0w0

2024/04/04 04:57

getShifts.phpのネットワークのレスポンスを見てみました。するとエラー？が出ていました Fatal error: Uncaught PDOException: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'id' in 'field list' in C:\xampp\htdocs\partshift\content\getShifts.php:27 Stack trace: #0 C:\xampp\htdocs\partshift\content\getShifts.php(27): PDOStatement->execute() #1 {main} thrown in C:\xampp\htdocs\partshift\content\getShifts.php on line 27

Umi_0w0

2024/04/04 05:09

すみません色々試してみました。 getshifts.php $sql = "SELECT id,　　ここの部分を $sql = "SELECT shift_id, に変更。そしてそれに伴い id: value['id'], の部分を id: value['shift_id'] に変更したらまた別のエラーが出ましたが今回の質問元であるエラーは解決しました。

Umi_0w0

2024/04/04 05:55

回答ありがとうございます。ベストアンサーに選ばせていただきました。

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

あなたの回答