PHPの配列をj-queryに渡してeach処理をさせる方法

Question

宜しくお願い致します。

PHPの配列をj-queryに渡してeach処理をさせる動作がうまくいっておりません。

■やりたい流れ

１、PHPの配列をJSON.parseでj-queryに渡す
２、送った配列の値を使用し、下記の処理を配列の数の分、行う

$(function(){
                $("#id名 + 配列の値").click(function(){
               $("#配列の値").remove();
            });
           });

３、#id で囲まれた各要素をクリック時に削除する

■できていないこと

上記の２番の処理がうまくいっておらず、３でクリックをしても要素が削除できません。
下記のコードを試しましたが、うまく動作しておりません。

$(function() {
 
var arr = [JSON.parse('<?= json_encode($test) ?>')];
	
    $.each(arr, function(index, element) {
		
$(function(){
           
            $('"#btn' + element + '"').click(function(){
               $('"#' + element + '"').remove();
            });
           });

	
});

■確認をしたいこと
１、正しい構文の内容（そもそもeachで繰り返し処理をすることが正しいのか）
２、#id名と配列の中の値を連結したい場合、j-queryでどのように記載をすれば良いか。

■確認したこと
JSON.parseで配列が取得はできてそうでした。
下記のスクリプトで配列の中身の表示は確認しました。

$(function() {
 
var arr = [JSON.parse('<?= json_encode($test) ?>')];
	
    $.each(arr, function(index, element) {
        $('.sample').append(element + '<br>');
    });
 
});

Comments

[m.ts10806]

$testの内容を例示してください。
またブラウザ「ソースを表示」で想定の情報が来ているか
デベロッパツールのコンソールでエラーが出ていないか確認してください

[yambejp]

JSONのサンプルと、想定する出力HTMLを例示ください

[tomato01]

ご連絡ありがとうございます。

出力HTML

<?php
foreach ($_REQUEST[‘box’] as $test) {
echo '<div id="'.$test,’”>’;
echo ‘<p>テスト</p>’;
echo '<input type="button" id="btn1'.$test,’”>’;
echo '</div>';
}
?>

ブラウザーのソースに表示されるJSONの内容

$(function() {
var arr = [JSON.parse(‘[“101”,”102”,”103”]’)]; ※かっこの中には$testの中身です。

$.each(arr, function(index, element) {
$("'#btn' + element").click(function(){
$("'#' + element").remove();
});
});

});

[tomato01]

デベロッパツールのコンソールでエラーは出ていませんでした。

Answer 1

var arr = [JSON.parse('<?= json_encode($test) ?>')]

これは流石に良くないです
jsは外部ファイル化する場合が多いので、jsコードの中にダイレクトに
phpの処理を入れるのは賢明ではなりません

クロスドメインの問題がないなら、jsにわたすphpのJSONデータは
ajaxなど（jQueryを利用しないならfetchがベター）で処理することを
おすすめします

ajaxで処理

• json.php

<?PHP
header('Content-Type: application/json'); 
$data=[1,2,3];
print json_encode($data);
?>

のようなjsonを返すapiを用意する

• js

$.ajax({
  url:"json.php",
  dataType:"json",
}).done(function(data){
  console.log(data);
});

Comments

[tomato01]

ご回答を頂き誠にありがとうございます。
もし可能でしたら、今回のケースでajaxを使用する場合のサンプルのコードをご教授いただけないでしょうか。

よろしくお願いいたします。

[yambejp]

ajaxサンプル追記してあります
具体的なjsonデータと想定する結果がわからないのでeach処理は提示してありません

[tomato01]

ご連絡が遅くなり失礼しました。
サンプルをいただきありがとうございました！

Answer 2

エスケープして渡し、カスタムデータ属性に突っ込むのが適切だと思います。
参考)
JSONのエスケープ