htmlのphp部分からPOSTで受け取った配列をjsに格納する際に思うように動作しません。

Question

前提・実現したいこと

htmlの入力フォームから外部のjsファイルに配列を受け渡しはできるのですが、思うような動作をしてくれません。

該当のソースコード

<?php
if(isset($_POST['num_parts'])){
    $nps = $_POST['nums_parts'];
    $np = $_POST['num_part'];
    include('./RaderChart.php');
}
 ?>
<form action="test.php" method="post">
    <div class="movie_title1">
    <input type="checkbox" name="nums_parts[]" value="0">0
    <input type="checkbox" name="nums_parts[]" value="1">1
    <input type="checkbox" name="nums_parts[]" value="2">2
    <input type="checkbox" name="nums_parts[]" value="3">3
    <input type="checkbox" name="nums_parts[]" value="4">4
    <div class="movie_janle1">
    <input type="checkbox" name="num_part[]" value="0">国語
    <input type="checkbox" name="num_part[]" value="1">理科
    <input type="checkbox" name="num_part[]" value="2">社会
    <input type="checkbox" name="num_part[]" value="3">音楽
　　<input type="checkbox" name="num_part[]" value="4">体育
    <input type="submit" value="送信する">
</form>

<canvas id="myRaderChart"></canvas>
<!-- CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script>
    var ctx = document.getElementById("myRaderChart");
    var myRadarChart = new Chart(ctx, {
        type: 'radar',
        data: {
<!-- labels: ["英語", "数学", "国語", "理科", "社会"]元のプログラム -->
            labels: ["<?php
                        foreach($np as $nps){
                            echo "$nps";
                            echo ",";
                        }
                 ?>"],
            datasets: [{
                label: '<?php echo $nps[0] ?>',
                data: [92, 72, 86, 74, 86],
                backgroundColor: 'RGBA(225,95,150, 0.5)',
                borderColor: 'RGBA(225,95,150, 1)',
                borderWidth: 1,
                pointBackgroundColor: 'RGB(46,106,177)'
            }, {
                label: 'Bさん',
                data: [73, 95, 80, 87, 79],
                backgroundColor: 'RGBA(115,255,25, 0.5)',
                borderColor: 'RGBA(115,255,25, 1)',
                borderWidth: 1,
                pointBackgroundColor: 'RGB(46,106,177)'
            }]
        },
        options: {
            title: {
                display: true,
                text: '試験成績'
            },
            scale: {
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100,
                    stepSize: 10,
                    callback: function(value, index, values) {
                        return value + '点'
                    }
                }
            }
        }
    });
</script>

試したこと

参考サイト
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369

参考サイトのように五角形のレーダーチャートを描きたいのですが、配列を回して表示させても１つの文字として認識されてしまうためうまくいきません。

補足情報（FW/ツールのバージョンなど）

うまく説明できてない部分があるかと思いますが、協力いただければ幸いです。

現状の状態と理想を添付します。
![]![

Answer 1

手元で試さずにざっくりみただけですがこれだと

["英語,数学,国語,理科,社会,"]

とならないでしょうか？

labels: [<?php
          foreach($np as $nps){
            echo '"$nps"';
            echo ',';
          }
        ?>],

にしたらどうなるでしょう。

あと、別件になりますがFormで受け取った値をそのままJavaScriptに渡してしますとXSSなどの重大なセキュリティホールとなりますので、絶対にしない方がいいです。htmlspecialchars関数を使って対策するとか、Laravelなどのフレームワークなどを利用するなどを検討された方が良いかと思います。

Comments

[daiki__1019]

回答ありがとうございます。
自分で色々試していたところ
```
labels: [<?php
foreach($np as $nps){
echo '"$nps,"';
}
?>],
```
当該コードで改善できました

XSSの件忠告ありがとうございます。

Answer 2

JavaScriptのオブジェクトって往々にしてJSON形式なので、
json_encode()でいいのでは。

<?php
$t = [];
$t[] = "a";
$t[] = "b";
$t[] = "c";
$t[] = "d";
echo json_encode($t);
// ["a","b","c","d"]