PDOで取得した画像パスのデータをJavaScriptに受け渡す

2018年3月19日

皆さんこんにちは、タカモリです!

前回はPDOで取得したデータから、カラムの配列を作成し、そのデータをphpを使ってJavaScriptの配列に受け渡すという処理を行った。

近い目標としては、以前から言っているサムネイル一覧表からリッチテキストに画像貼り付けを行える処理を作りたい訳だが、何せこれを作る為にはphpとJavascriptの間でのデータの受け渡しが必要なので、今は自分のレベルアップ中である。

もちろん前回の処理も今回の処理もやったことないので、実際に動くかどうかを試しながらやっている。前回が意外にも成功したので、今回はデータベースのカラムでもレコードでもなく、テーブルそのものを、phpでJavaScriptに送ってしまおうと思う。

前回同様かなり勉強したのだが、今回まず俺が学んだ中で要点となると思うのが、多次元配列だ!

多次元配列とは、配列の中に配列を入れたものと言えると思う。

エクセルや、データベースのテーブルを思い出して欲しいのだが、縦×横の升目にそれぞれデータを入れることができる仕様になっていると思うが、まさにあれが多次元配列だ!

とは言うものの、今回の俺の処理は多次元配列を作ることはしない。

何故なら、データベースから「SELECT」で取りだした値が既に多次元配列になっているからだ。

前回は「fetchAll()」関数で全てを取りだした後に、カラムの連想配列をJavaScriptに送り込んだが、今回は連想配列は作らずに、そのまま送り込んでみる。

ということで、今回用意したソースがこちら。

まったくもって今説明したままのSrcなのだが、JavaScriptに送った後の処理がややこしい。

おそらくなのだが、JavaScriptの仕様だとデータベースからのデータはオブジェクトという仕様になるみたいだ。配列専用のfor文である「for each」 文は使えなかった。

[object][object]みたいな変な文字の羅列が表示されてしまう。

それと、「hasOwnProperty」関数?これを使わないと俺の場合はループの処理が何故か2回連続で行われた。

これを使うと通常の処理ができるのだが、使い方あってるのかな?

所定の扱い方は上の画像のコメントに書いてあるとおりだ。ブラウザで表示させるとこうなる。

データベースと見比べてほしい。全く内容が同じであることがわかる。

では、以前作ったメディアアップロード画面から、画像を追加してみる。

するとどうなるだろうか。

データベースにも、ブラウザでも全く同じ表記であり、画像パスが追加されていることがわかる。

ということで、今回は成功した。よかったー。。。

あ!そういえばさらっと流してしまったのだが、画像パスをデータベースに送るphpファイルについても今回PDOに更新した関係で構文を簡単にではあるが、作りなおしたので一応貼っておく。

(本当に汚いSrcで申し訳ございません。)

ということで、今回はここまでだ。次回はこの送ったデータを利用してJavaCcriptに画像を表示させることが

できたらいいなぁ~。