PHP(HTML)から呼び出したJavaScriptにJSON経由で連想配列を渡した時のエラーについて

下記のようなソースでPHPから呼び出したJavaSciptに、２重の連想配列を渡す。
１個の連想配列、または複数の連想配列の最後の連想配列だけなら正常に受け渡せます。

　下記のソースに「$HAIRETSU」を「$HAIRETSU[]」と修正して実行すると、JavaScript的には複数要素の連想配列的な要素として受け渡されていますが、実行時に「Object Object」というエラー表示となります。

　当初、「Object Object」というエラーからJavaScriptの問題と思いましたが「 Object.keys( ...)」で正しいことは確認できたと思い、JSON関連のPHPとJavaScriptの受け渡し方法と推定しています。

　複数要素を持つ連想配列をPHPからJavaScriptへ渡す方法を宜しくお願い致します。
<< ソース >>

<?php try { $PDO = new PDO( 'sqlite://xxx/blog/Navi-Main.sqlite3' ); $PDO -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION ); $PDO -> setAttribute( PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC ); $SQL = sprintf( "SELECT * FROM navi_toc ORDER BY SEQ ASC, Attribute" ); $data = $PDO -> query( $SQL ); foreach( $data as $value ) { $HAIRETSU = array( $value[ 'Surrogate_key' ] => array( 'SEQ' => $value[ 'SEQ' ], 'Attribute' => $value[ 'Attribute' ] ) ); } # foreach } catch ( Exception $e ) { echo $e->getMessage().PHP_EOL; } $jsonEncode = json_encode( $HAIRETSU ); ?> <!DOCTYPE html> <html> <head> <title>HTML-JavaScript連携(ｄｂ連携・連想配列)</title> </head> <body> <script> var HAIRETSU = JSON.parse( '<?php echo $jsonEncode; ?>' );

  Object.keys( HAIRETSU ).forEach( function( keyA ) {
    for( var keyB in HAIRETSU[ keyA ] ) {
      window.confirm( '[ ' + keyA + ' ]/[ ' + keyB + ' ]：「 ' + HAIRETSU[ keyA ][ keyB ] + ' 」' );
    }
  }, HAIRETSU );
</script>

</body> </html> << ソース・終了>>

<< 実行結果 >>

<!DOCTYPE html> <html> <head> <title>HTML-JavaScript連携(ｄｂ連携・連想配列)</title> </head> <body> <script> var HAIRETSU = JSON.parse( '{"8":{"SEQ":"12","Attribute":"Navi-tokyo"}}' );・・・・最後の１個しか渡せない。

  Object.keys( HAIRETSU ).forEach( function( keyA ) {
    for( var keyB in HAIRETSU[ keyA ] ) {
      window.confirm( '[ ' + keyA + ' ]/[ ' + keyB + ' ]：「 ' + HAIRETSU[ keyA ][ keyB ] + ' 」' );
    }
  }, HAIRETSU );
</script>

</body> </html> << 実行結果・終了 >>

<< 実行結果(訂正後) 分かり易いように適切に改行・空白を入れています。 >>
var HAIRETSU = JSON.parse( '[
{ "11":{"SEQ": "1", "Attribute":"Navi_NHK"} },
{ "3":{"SEQ": "4", "Attribute":"Navi_TOC.php?Attrbt=NTV-BTT"} },
{ "10":{"SEQ": "8", "Attribute":"Navi_tv-fuji"} },
{ "9":{"SEQ":"10", "Attribute":"Navi_tv-asahi-TSS"} },
{ "8":{"SEQ":"12", "Attribute":"Navi-tokyo"} }
]' );
<< 実行結果・終了 >>

単一要素の連想配列

ソースを修正した、複数要素の連想配列

データベース：フィールド「SEQ」、「Attribute」・・・

2KOH

2019/12/22 07:01

質問内のコードは、Markdown のコードブロックを使って記述してください。 > JavaScript的には複数要素の連想配列的な要素として受け渡されていますが「複数要素の連想配列的な要素」は意味不明です。おそらく「連想配列を要素とする配列」のことだと思いますが、そのように表現してください。 > 「Object Object」というエラー表示となります [Object Object] はエラーではなくバグです。今のコードだと [Object Object] と表示されるのは正常な動作だと思われます。

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

回答2件

PHP側でのデータの受け渡し方、及び JavaScript側でのデータの受け取り方に特に問題は見られません。
JavaScript側でデータを受け取った後の扱い方に問題があると思われます。

「$HAIRETSU」を「$HAIRETSU[]」と修正して実行すると

PHP側で受け渡すデータ形式を変更した場合、当然 JavaScript側で受け取ったデータの扱い方もデータ形式に合わせて変更する必要があります。
ですが、実行結果から推測するに JavaScript のコードを変更せずに使用していると思われます。

PHP側で「$HAIRETSU」を「$HAIRETSU[]」に修正したのに合わせて、JavaScript側で受け取ったデータの扱い方も変更すればいいと思います。

投稿2019/12/22 07:01

2KOH

総合スコア999

Freedom1ab

2019/12/22 07:26

下記のようにJavaScript内で記述した連想配列でObject.keys(...forEach( function( keyA ) {...}, HAIRETSU );で希望どうりの表示結果が得られるので、JSON周りの問題と思っての質問でした。 <script> var HAIRETSU = { 'A11':{ 'SEQ': '1', 'Attribute':'Navi_NHK', 'SubTitle':'NHK', }, 'F12':{ 'SEQ':'99', 'Attribute':'Navi_www.5499.cloud-001.html', 'SubTitle':'5499.cloud' } }; Object.keys( HAIRETSU ).forEach( function( keyA ) { for( var keyB in HAIRETSU[ keyA ] ) { window.confirm( '②Key[ ' + keyA + ' ]/[ ' + keyB + ' ]：「 ' + HAIRETSU[ keyA ][ keyB ] + ' 」' ); } }, HAIRETSU ); </script> ご指摘の「JavaScript側で受け取ったデータの扱い方も変更すればいいと思います。」のアドバイスをお願いします。

2KOH

2019/12/22 13:47

すでに PHP も JSON もエラーも全く関係ない問題であり、当初の質問の方向性とは大きく異なります。このまま質問を続行するのは好ましくないと思うので、これ以上のアドバイスは行いたくありません。ただ動作するだけのコードだけ提示しておきます。 ((a,b,c=(a,c)=>b(Object.keys(a),b=>c(b,a[b])))=> b(a,b=>c(b,(a,b)=>c(b,(b,c)=> window.confirm( '[ ' + a + ' ]/[ ' + b + ' ]：「 ' + c + ' 」' ) ))))(HAIRETSU,(a,b)=>a.forEach(a=>b(a)))

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

自己解決

$HAIRETSU[]に訂正した場合は、2KOHさんからご提示頂いたコードで「((a,b,c=(a,c)=>b(Object.keys(a),b...」で無事に、想定した表示を得られることが確認できました。

<<確認したコード>>

<?php try { $PDO = new PDO( 'sqlite://xxx/blog/Navi-Main.sqlite3' ); $PDO -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION ); $PDO -> setAttribute( PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC ); $SQL = sprintf( "SELECT * FROM navi_toc ORDER BY SEQ ASC, Attribute" ); $data = $PDO -> query( $SQL ); foreach( $data as $value ) { $phpHAIRETSU[] = array( $value[ 'Surrogate_key' ] => array( 'SEQ' => $value[ 'SEQ' ], 'Attribute' => $value[ 'Attribute' ] ) ); } # foreach } catch ( Exception $e ) { echo $e->getMessage().PHP_EOL; } $jsonEncode = json_encode( $phpHAIRETSU ); ?> <!DOCTYPE html> <html> <head> <title>HTML-JavaScript連携(ｄｂ連携・連想配列)　その３</title> </head> <body> <script> var HAIRETSU = <?php echo $jsonEncode; ?>;

/* ２重連想配列・PHP(HTML)-JSON-JavaScript */
( ( a, b, c=( a, c ) => b( Object.keys( a ), b=>c( b, a[ b ] ) ) ) =>
b( a, b => c( b, ( a, b ) => c( b, ( b, c ) => window.confirm( 'Key:[' + a + ']/[' + b + ']、Value:「' + c + '」' ) ) ) )
) ( HAIRETSU, ( a, b ) => a.forEach( a => b( a ) ) )
</script>

</body> </html>

投稿2019/12/22 16:34

編集2019/12/22 16:36

Freedom1ab

総合スコア60