JavaScriptで動的に生成した配列をphpで取り出したい

Question

クリックイベントで動的に配列を生成しています。
様々なサンプルを試しているのですがうまく取得できません。

    $( '.detail' ).on('click', function(e) {
      e.preventDefault();    
      val = $(this).attr('value');
      // 多次元配列から新たに配列を生成 
      var newLine = data.filter(function(item, index){
        if (item.No == val) return true;
      });
      console.log( '対象製品データ配列',newLine );
      
      var aryJSON = JSON.stringify(newLine);
      var json = { a: aryJSON };
　　　$.ajax({
　　　  type: 'POST',
　　　  url: 'http://localhost/Detail.php',
　　　  dataType: 'json',
　　　  data:  json,
　　　}).done(function(data) {
　　　  console.log( '成功' );
　　　}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
　　　  console.log( 'NG' );
　　　})

   });

<?php 
      $data = filter_input(INPUT_POST, 'a');
      $array = json_decode( $data , true ) ;
      print('<p>' . $array['No'] . '</p>');
?>

補足：各配列の中身は以下の様になっています。(コンソールより)
元の配列:data
0: {No: "57", MakerID: "1", Maker: "Axis", TypeID: "1", Type: "室内 固定カメラ", …}
1: {No: "58", MakerID: "1", Maker: "Axis", TypeID: "3", Type: "室外 固定カメラ", …}
2: {No: "235", MakerID: "1", Maker: "Axis", TypeID: "8", Type: "組込型", …}
3: {No: "236", MakerID: "1", Maker: "Axis", TypeID: "8", Type: "組込型", …}
4: {No: "286", MakerID: "1", Maker: "Axis", TypeID: "5", Type: "室外 パンチルトズーム", …}
5: {No: "287", MakerID: "1", Maker: "Axis", TypeID: "5", Type: "室外 パンチルトズーム", …}

新たに生成した配列:newLine
[{…}]
0:
ActiveTamperingAlarm: "いたずら警告"
Audio: "双方向"
AudioDetection: "音声検知"
CarPic: "images/button/lamp_off_car.png"
ColorLux: "0.2"
DayNight: "○"
DayNightPic: "images/button/lamp_on_dayNight.png"
Maker: "Axis"
MakerID: "1"
MakerPrice: ""
MicrophonePic: "images/button/lamp_off_microphone.png"
Models: "P3367-V"
ModelsExt: ""
MonoLux: "0.04"
No: "57"　　　・・・

json配列:json
a: "[{"No":"57","MakerID":"1","Maker":"Axis","TypeID":"1","Type":"室内 固定カメラ\　　・・・

Answer 1

var newLine = data.filter

dataが定義されていないのでは？

Comments

[退会済みユーザー]

せやな

[退会済みユーザー]

配列を生成する際に定義しているのですが・・これでは違いますか?

[退会済みユーザー]

クリック前のphp側にてデータベースから取得しています。($json_array)
それをphp側から送信しています。
var data=JSON.parse('<?php echo $json_array; ?>');

[yambejp]

> var data=JSON.parse('<?php echo $json_array; ?>');

今度は$json_arrayってなんですか？ってなりそうですね
ご自身の環境でしか確認のできないことをさらに
ソースから削って質問されても回答できる人間はいないかと・・・

[退会済みユーザー]

配列はコンソールにて確認できている上コンソール内容を記載しているので不要と思いました。
ご指摘ありがとうございました。

[yambejp]

aには[{・・・,No:"57"}]のようなデータが入ります
デコードするとベースは配列になるので参照方法がおかしいです

$data = filter_input(INPUT_POST, 'a');
$array = json_decode( $data , JSON_OBJECT_AS_ARRAY) ;
print '<p>' . $array[0]['No'] . '</p>';

いまの渡し方だと最低でも配列の番号が入るはずです

[yambejp]

また、val = $(this).attr('value');
が、いまいち何をしたいのかわかりません
detailクラスがついたボタンか何かがあるのでしょうか？

[退会済みユーザー]

はい、ボタンのvalue値です。
クリックイベントでボタンのvalue値により、多次元配列dataを検索し、新たに配列newLineを生成しています。（この説明であっていますか？）

[退会済みユーザー]

各配列の動きを補足にコンソールより転載してみました。

$data = filter_input(INPUT_POST, 'a');
$array = json_decode( $data , JSON_OBJECT_AS_ARRAY) ;
print '<p>' . $array[0]['No'] . '</p>';
まだ取得できませんでした。

[yambejp]

退会するほど回答が気に入らなかったのでしょうか・・・反省

Answer 2

newLineはArray型なのでは？filterメソッドを使っているので戻り値はArrayのはず。
で、それをjson文字列にして{ a: "[...]" }として送っているのですよね？
であれば受け取るPHP側は以下になるはず。

<?php 
      $data = filter_input(INPUT_POST, 'a');
      $array = json_decode( $data , true ) ;
      var_dump($array); // こっちの方が型も確認できるのでおすすめ
      print('<p>' . $array[0]['No'] . '</p>');
?>

Comments

[退会済みユーザー]

回答ありがとうございます。
おっしゃるとおりarray型です。php側は直してみましたが、ajaxがまだ通らないので確認がとれていませんが。。

[deo_deo]

ん？ajaxが通らないというのはあのソースコードでという事でしょうか？
おそらく永遠に通らないでしょう。
dataType: json
を指定しているにも関わらず、htmlコードをphpは返しているので永遠にエラーになると思います。
dataType: html
にすればとりあえず通るかもしれません。（ブラウザによって挙動が違うのでエラーになるやつもあるかもしれませんが）
あとは、php側でheaderを指定しましょう。
ajax php headerで調べると出てくると思います。
基礎知識をしっかり学べば自ずと解決できると思います。

[退会済みユーザー]

ありがとうございます。試してみます。

[退会済みユーザー]

ちなみにヘッダーは割愛しただけで記述はしてあります。

[退会済みユーザー]

var_bumpはNULLとなってしまいましたが、回答頂いたajaxの修正で通りました！ありがとうございます。

[deo_deo]

がんばってｂ

[退会済みユーザー]

ありがとうございます。

Answer 3

jQuery.ajax() | jQuery API Documentation
Ajaxでpost送信 - Qiita

post送信するdataの与え方が色々間違っているので、
示した記事を参考に直してみてください。
data: json,
で、変数jsonに納まっているJSON文字列を送信しそうな気がします。

Comments

[退会済みユーザー]

回答ありがとうございます。
添付頂いたページも以前に試したのですが、もう一度やってみました。
コードを書き変えてあります。
こちらではやはり通りませんでした。

[退会済みユーザー]

で、php側で、試しに var_dump($_POST); してみればいいです。

[退会済みユーザー]

試してみましたがそもそもajaxが通りません。。

[退会済みユーザー]

yambejpさんの回答での指摘の件も併せて、
var newLine = data.filter() のdataってどこから来てますかねと。

[退会済みユーザー]

クリック前のphp側にてデータベースから取得しています。($json_array)
それをphp側から送信しています。
var data=JSON.parse('<?php echo $json_array; ?>');

[退会済みユーザー]

その var data とスコープが違うので、
このクリックイベント内には存在しないのではないかと。
data.filter() を書く直前にでも、console.log()とかでdataの中身をチェックしたら中身はありますか？

[退会済みユーザー]

はい、確認できます。
0: {No: "57", MakerID: "1", Maker: "Axis", TypeID: "1", Type: "室内 固定カメラ", …}
1: {No: "58", MakerID: "1", Maker: "Axis", TypeID: "3", Type: "室外 固定カメラ", …}
2: {No: "235", MakerID: "1", Maker: "Axis", TypeID: "8", Type: "組込型", …}
3: {No: "236", MakerID: "1", Maker: "Axis", TypeID: "8", Type: "組込型", …}
4: {No: "286", MakerID: "1", Maker: "Axis", TypeID: "5", Type: "室外 パンチルトズーム", …}
5: {No: "287", MakerID: "1", Maker: "Axis", TypeID: "5", Type: "室外 パンチルトズーム", …}
といった具合です。

[退会済みユーザー]

それならば、var newLine にはdata.Filter()したのが適切に入ってきている？
なんかリモートデバッグしているような気分、、
変数やオブジェクトの中身を一手ずつ確認してほしい、指摘される前に。
そしてどこでどうなってておかしくなってると、第三者にわかるように情報をまとめて伝えてほしい。

[退会済みユーザー]

補足部分に記載しているコンソールの転載の内容で正しくfilterされています。
ajaxが通らなかったので質問をした次第です。ajaxについてはdeo_deoさんのご回答にて通るようになりました。
皆様配列に関して頂くのですが、タイトルが悪かったようです。説明不足で申し訳ありません。

[退会済みユーザー]

var_dump($_POST); してみればいいです、って助言が無視されたので、てっきりjs側かと。

[退会済みユーザー]

失礼しました。ajaxが通るようになってから試したのですが、var_dump($_POST);の結果がarray(0) { }となってしまっていました。
他の回答者様のコードをためしていたりして私のお返事の遅れです。申し訳ありません。