JavaScript PHP 配列

前提・実現したいこと

画像（背表紙）をクリックすると詳細が現れるというプログラムを書いています。
script内で実行している詳細を示す関数での挙動がうまくいきません。

下のプログラムではまずconsole.log()で引数を正しく受け取れているかを確認しようとしています。
DB内にはidとimage(画像データ）とimage_name(画像の名前（output_1.jpg以降数字が昇順となり続く))が格納されています。
SQL文で$resultに全てのデータを格納しています。

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

console.log(js_array)での出力

console.log(js_array[image_name]での出力

undefind

Uncaught ReferenceError: image_name is not defined

該当のソースコード

php
1<?php
2    //データベース接続用変数
3    $host = "xxxx";
4    $dbname = "yyyy";
5    $user = "wwww";
6    $pass = "zzzz";
7
8    //データベース接続
9    try{
10        $dbh = new PDO(
11            //サーバー名、データベース名、文字エンコード
12            "mysql:host=$host;dbname=$dbname;charset=UTF8", 
13            //ユーザ名
14            $user, 
15            //パスワード
16            $pass, 
17            //オプション
18            array(
19                //例外発生時スローを指定
20                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
21                //静的プレースホルダの指定
22                PDO::ATTR_EMULATE_PREPARES => false,
23            )
24        );
25
26        //SQL文実行準備
27        $prepare = $dbh -> prepare('SELECT * FROM book_image');
28        //実行
29        $prepare -> execute();
30        //データ取得
31        $result = $prepare -> fetchAll(PDO::FETCH_ASSOC);
32    }catch (PDOException $e){
33        //例外処理
34        $error = $e -> getMessage();
35    }
36
37?>
38<!DOCTYPE html>
39<html lang="en">
40	<head>
41		<meta charset="utf-8">
42		<title>Ring Web Application Inner</title>
43        <meta http-equiv="X-UA-Compatible" content="chrome=IE8">
44        <link rel="stylesheet" type="text/css" href="bookinterfacestyle.css"/>
45        <!-- <script src="javascript/ring.js" type="text/javascript" charset="utf-8"></script> -->
46        <script>
47            function onDetails(){
48                var js_array = <?php echo $json_array ?>
49                console.log(js_array[image_name]);
50            }
51        </script>
52    </head>
53    <body>
54        <div id = "interface">
55            <div id = "search"></div>
56            <div id = "books">
57                <?php foreach($result as $res): ?>
58                    <?php $json_array = json_encode($res) ?>
59                    <?php $img = base64_encode($res[image]) ?>
60                    <img src = "data:image/jpg;base64,<?php echo $img ?>" alt = "<?php echo $res[image_name] ?>" onClick = "onDetails()">
61                <?php endforeach ?>
62            </div>
63        </div>
64        <div id = "details">
65            <div id = "title"></div>
66            <div id = "author"></div>
67            <div id = "category"></div>
68            <div id = "images">
69                <div id = "beforeImage"></div>
70                <div id = "afterImage"></div>
71            </div>
72            <div id = "content"></div>
73        </div>
74    </body>
75</html>

試したこと

引数を$res[image_name]とし、console.log()を実行すると正しく表示されます。
nなのでjson形式に変換しているところ付近でのミスかと思います。

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

20/12/28　19：30 ソースコード（DB接続部分）を追記しました。

m.ts10806

2020/12/28 08:46

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

m.ts10806

2020/12/28 08:58

↑失礼、メインのコードはされてましたね。

m.ts10806

2020/12/28 09:01

回答したあとに難ですが、「ソースコードの47行目から記載させていただきます。」といっても元のコードを知らないわけですし、やはり一通り提示されたほうが良いかと思います。提示してないところに問題が全くないとは見ている人には判断できませんので。 DB接続部分の情報は "" とするなり "test"とするなり適当にマスクかけてもらって構いません。

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

回答2件

$resultの内容が提示されないと「起きてそうな現象」くらいしか指摘ができませんが・・

PHPから出力されるのは文字列です。
そして原則として上から順に処理されるので、

var js_array = <?php echo $json_array ?>の時点では$json_arrayという変数自体定義されていません。
PHPで未定義のnotice出てるのでは（出てなかったら出るように設定してください）
出力外の処理はなるべく冒頭に書くのがよろしいかと思います。

あと$res[image_name]のように書くとimage_nameは「定数」です。
そのような定数は定義されてないように見受けられます。
キーを参照するのでしたら$res['image_name']または$res["image_name"]。定数使いたいなら事前に定義すること。
※image_nameに限らず

投稿2020/12/28 08:53

編集2020/12/31 00:24

m.ts10806

総合スコア80859

退会済みユーザー

2020/12/28 10:46

ご指摘ありがとうございます。 onDetails関数内で$json_arrayがいきなり現れたという状況なのでしょうか。それだとonDetailsに仮引数として$json_arrayを与え、onClick = "onDetails($json_array)"とすることで可能になるのではと試しましたが、$json_array is not defind のエラーが発生してしまいました。 json形式に変換することは間違ってないと思うのですが、、もしまたお答えいただけるようでしたらお願い致します。二つ目の定数のお話は納得しました。以後に活かしたいと思います。

m.ts10806

2020/12/31 00:29

返信遅れました。 >onDetails関数内で$json_arrayがいきなり現れたという状況なのでしょうか。はい。回答に書いたように、原則PHPは上から処理されます。HTMLはPHPにとって出力される文字列の集合体に過ぎません。 >それだとonDetailsに仮引数として$json_arrayを与え JavaScriptもPHPにとっては文字列の集合体です。そして実行されるのはPHPのほうが先です。サーバーサイドですから。クライアントサイドであるJavaScriptは同じくクライアントサイドであるHTMLのレンダリングに合わせて実行されます。ブラウザから「ソースを表示」して出力されたHTMLを確認してみると良いです。おそらく思ってるようなコードにはなっていないはずです。 HTML内部でPHP側の変数を使いたいなら、出力より先に書くしかありません。今質問者さんが書いているコードはミニマムにすると下記と同じです。 ------------- <?php echo $a; $a = 'test'; ------------- これでは「test」とは出力されませんよね？

退会済みユーザー

2021/01/01 12:03

お返事ありがとうございます。詳しく説明していただき、主さんの言っていることは理解できました。

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

ベストアンサー

DBから得たデータをただの文字列の引数としてonDetailsを呼び出すことにしました。

php
1function onDetails(imageName){
2             console.log(imageName);
3}
4
5<?php foreach($result as $res): ?>
6 <?php $img = base64_encode($res['image']) ?>
7 <img src = "data:image/jpg;base64,<?php echo $img ?>" onClick = "onDetails('<?php echo $res['image_name'] ?>')" >
8<?php endforeach ?>