- ベストアンサー
PHPのjson_encode()を使って配列をJavaScriptに送る方法
- PHPのjson_encode()関数を使用して、配列をJavaScriptに送る方法を説明します。
- この方法は、自作のカラオケシステムのプログラムで使用されています。
- さらに、曲を選択するための別の方法もあります。
- papashiroSooke
- お礼率90% (507/560)
- PHP
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
プログラムはよくなったみたいですね。 もしかしたらデータの中に引用符「'」などが含まれているのではないでしょうか。 仮に、タイトルが「He's song」だったとします。 すると出力されるものはこうなります。 var allTitles = JSON.parse('["He's song"]'); こうなるとで引用符で囲まれた部分、 '["He' までがparseの引数と認識されて、 そのすぐ後ろが閉じカッコでないと言うエラーになります。 s song"]'); が解釈不可能な扱いです。 解決法はエンコードのオプションで「'」をどうするかを指定します。 $JStitles = json_encode($titles,JSON_HEX_APOS); 他にも影響がありそうな文字があれば対応してみてください。 https://so-zou.jp/web-app/tech/programming/php/json/ https://www.php.net/manual/ja/function.json-encode.php
その他の回答 (5)
- dell_OK
- ベストアンサー率13% (766/5720)
(select_song.php:110:103)は、 select_song.phpの１１０行目１０３カラムに問題があることを示しています。 クリックすると、Sourcesタブの問題の箇所が表示されないでしょうか。 おそらくですが、その付近に function showAllSongs() があると思います。 その上のあたりにミスがあって function showAllSongs() が正しく解釈されていないのではないかと思います。
お礼
ご回答有難うございます。 「１１０行目１０３カラム」の意味を理解するのに１０分ほどかかりました。これは開発者ツールの中のsourceタグに出てくるリストの事なのですね。 私は何故かsourceタグをクリックしても何も表示されず、当然自分のプログラムのソースコードだと思っていました。それにしては１０３カラムもあるような長い文は無いので不思議に思っていましたが、それが何だったかは覚えていませんが、何かの拍子にsourceタグにリストが表示されました。自分が書いた覚えのあるステートメントがあるかと思えば、書いてあったはずの多くの部分が無いようなリストですが、回答者さんの仰ることがわかりました。 色々とやっているうちにshowAllSongs関数の事は消えて、今度はconsoleタグには次のようなメッセージが出ています。 uncaught syntaxError: missing ) after argument list( at select_song.php 10:29) そこでsourceタグをみますと、次のようなリストの部分です。 ８行目 let totalData = 7970; ９行目 let allNumbers = JSON.parse('[... 長い曲番号のリスト... ]'); １０行目 let allTitles = JSON.parse('[ ... 長い題名のリスト... ]'); １１行目 let allSingers = JSON.parse('[ ... 長い歌手名のリスト... ]'); そして１０行目には赤い波線が引かれてあり、行の終わりには赤くて丸いⓧがあります。メッセージにある２９カラム目は、JSON.parse( の "(" に相応します。つまりこの括弧の終わり部分が無いという事なのかなと思います。 それでエラーメッセージの意味は、この行に「終わりを示す ）記号が抜けているという事になるのでしょうが、このリストはjson_encode() という関数を使って変換したもので、それを自分がどうやって修正できるのか見当がつきません。PHPサイドで配列を作った時に何かミスをしたのでしょうか？ また自分のオリジナルプログラムでこの行をコメントアウトしたら、次は１１行目に赤い波線とⓧマークが移動しました。 両方ともコメントアウトしたら、初めてshowAllSongs() 内の alert()が働きました。 従って、私の問題はこの２行にあると考えらるのですが、解決方法が全く分かりません。 以上のような状況から、何か解決の糸口を見つけられるようなアドバイスを頂けると有難いです。
- dell_OK
- ベストアンサー率13% (766/5720)
回答No.1のお礼にかかれていた、 Uncaught SyntaxError: Unexpected token '<' は $totalCount が未定義のためＰＨＰがメッセージを出力しているからかと思います。 ブラウザでソースをみるとその箇所が、 var totalData = <br />省略 Notice: Undefined variable: totalCount in となっていました。
- dell_OK
- ベストアンサー率13% (766/5720)
その１ $dataCount = $i; から推測すると、 var totalData = <?php echo $totalCount; ?>; は var totalData = <?php echo $dataCount; ?>; だと思います。 その２ var allNumbers = JSON.parse('<?php echo $JSnumbers; ?>'); から推測すると、 $JSnumber = json_encode($numbers); は $JSnumbers = json_encode($numbers); だと思います。 以上で JSON.parse はされるようになりました。 そこから先は、 var myParent = document.getElementById("selectSpace"); で selectSpace がなくて表示されなかったため、 <div id="selectSpace"></div> を追加してみたら表示されました。
お礼
ご回答ありがとうございます。 ご指摘のスペルミスをすべて直して、 <div id="selectSpace"></div> を追加してみましたが改善されません。 <div id="selectSpace"></div> の部分は、実はもともとのソースコードでは書いてあるのですが、この質問にそのソース全体を添付しようとすると文字の制限４０００を超えるため、一時的に削除した部分に入っていました。 開発者ツールの方は、source タグでこのプログラムselect_song.php を見ると数字の１が表示されるだけです。このプログラムの親であるframeset.html はちゃんとソースコードが表示されます。 console タグには次のようなエラーメッセージが２つ出ます。 uncaught syntaxError: Invalid or unexpected token これには前と違って '<' は書かれていません もう一つは uncaught referenceError: showAllSongs not defined at HTML inputElement.onclick (select_song.php:110:103) で、showAllSongs 関数が未定義とありますが、どういうことなのかわかりません。また 110:103 とは何なのでしょうか？ この関数の中身をすべてコメントアウトし、代わりに alert("inside showAllSongs"); を挿入してボタンをクリックしますが、アラート画面は表示されません。 今までに経験したことのないもので、本当に困っています。 何か他に解決のヒントとなるようなご意見を頂けると有難いです。どうかよろしくお願いいたします。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
こちらもほぼ同じ意見かな～ PHP部では、エラーがでてるのか？ JS部でまずPHPでの取り出しがどうなっているのは、 そのうまくいかないは、エラーがでているなどなのか？ など。いろいろがわからない感じはありますね。 おまけ： ('<?php echo $JSsingers; ?>'); これ、略式では、<?= 変数名 ?>だけで行けますよ。 <?= これが<?php echo の略だったりします。 あと私なら、allXXXをまとめて一つの変数にしちゃうな～ count(all)か、all.lengthで数数えなくていいので、 QueryResultの段階で、配列直接出力していく方が、 HTML側は、すっきりするだろうな～って。 （ここは、直接の回答じゃなくて、あくまでおまけ部分ね）
お礼
早速にご回答有難うございます。 PHP側ではエラーメッセージは出ていません。 ただjson_encode() した後の$JStitles などをechoで表示させると、恐ろしいコードのようなものに変換されていて、json_encode() の第２引数に何らかのフラグを入れるべきだったのかなとも思ったりしています。このようなものをJS側でJSON.parse() したら元の文字列に戻るものなのでしょうか？ それから、上手く行かない事の具体例は、第１回答者さんへのお礼の中で説明しましたので、そちらをご覧いただけたら有難いです。
- t_ohta
- ベストアンサー率38% (5238/13705)
上手く行かないと言うのは具体的にどんな不具合が出ていますか。 また、PHPで生成したjsonデータをjavaScript部にechoで書き出していますが、ブラウザでソースを見た時どのような記述になっていますか。
お礼
早速のご回答、有難うございます。 上手く行かないと言いますのは、JS側でのallNumbers や allTitles, allSongs などの配列（自分では配列だと思っていますが）の要素を見ることが出来ないという事です。 例えば、showAllSongs() の中でalert(allTitles[0]) を挿入し、他をすべてコメントアウトして画面の入力欄に歌手の名前を入れ、"show songs" ボタンを押しても, alert 画面は現れません、json_encode() せずにecho でJSに直接渡したtotalData もダメです。 それから、ブラウザでソースを見るというのは開発者ツールを使うという事でしょうか？自分はあまりそこの事は詳しくありませんが、source タグを見ると何も表示されてません。しかしconsole タグを見ると以下のようなエラーメッセージが出ています。 uncaug ht syntaxError: unexpected token '<' uncaught referenceError: showAllSongs not defines '<' を探してみましたがどこにもおかしなものは見当たりませんし、showAllSongs() 関数はちゃんと定義してあります。従って何が悪くてalert() が表示されないのかわかりません。
お礼
的確なご回答、有難うございました。 json_encode()のフラグ JSON_HEX_APOS を入れることで、問題は全て解決しました。 英語の曲も何曲か入っているので、多分これらのタイトルにシングルクォートを含むものが在ったのだろうと思います。 ' )' が欠けているというエラーメッセージから、てっきりこのマークが犯人だろうと思って、データベース内の'(' と')' を全て'【' と '】' に変えてみましたが無駄でした。真犯人はシングルクォートだったんですね。 貴重なお時間を割いて勉強不足の私に長いことお付き合いいただき、本当に有難うございました。