ページ遷移せずに選択肢によってPHPの配列をソートして表示したい

実現したいこと

1.配列の中にある配列をソートキーとして指定したい。
出席番号順(number)、名前順(name-EN)、身長順(height)を指定したい。
2.プルダウンの選択肢によってページ遷移せずに配列の値をソートして<div id="return">の中身として表示させたい。

PHP
1$array = [
2    ['number'=>'10', 'name'=> array('name-JP'=>'佐藤', 'name-EN'=>'Satou'), 'physical'=> array('height'=>'165.5','weight'=> '55.5')],
3    ['number'=>'48', 'name'=> array('name-JP'=>'渡辺', 'name-EN'=>'Watanabe'), 'physical'=> array('height'=>'156.8','weight'=> '48.3')],
4    ['number'=>'12', 'name'=> array('name-JP'=>'鈴木', 'name-EN'=>'Suzuki'), 'physical'=> array('height'=>'160.2','weight'=> '50.6')],
5    ['number'=>'2', 'name'=> array('name-JP'=>'伊藤', 'name-EN'=>'Itou'), 'physical'=> array('height'=>'155.2','weight'=> '50.9')],
6    ['number'=>'28', 'name'=> array('name-JP'=>'高橋', 'name-EN'=>'Takahashi'), 'physical'=> array('height'=>'165.5','weight'=> '55.5')]
7];

発生している問題・エラーメッセージ

SyntaxError: Unexpected token < in JSON at position 17

該当のソースコード

HTML
1<select name="example" id="example">
2    <option value="sort1">出席番号</option>
3    <option value="sort2">名前</option>
4    <option value="sort3">身長</option>
5</select>
6<div id="return"></div>

JavaScript
1$(function(){
2    $("#example").change(function() {
3        const str1 = $("#example").val();
4        console.log(str1);
5        $.ajax({
6            type: "POST",
7            url: "ajax.php",
8            data: { "value" : str1 },
9            dataType : "json"
10        }).done(function(data){
11            $("#return").append('<p>'+data.value+'</p>');
12        }).fail(function(XMLHttpRequest, status, e){
13            alert(e);
14        });
15    });
16});

PHP
1    $value = $_POST['value'];
2    $return = array("value" => $value);
3    header("Content-type: application/json; charset=UTF-8");
4    echo json_encode($return);
5
6    if ( strcmp($return, "sort1") == 0 ) {
7        array_multisort(array_column($array, 'number'), SORT_ASC, SORT_NUMERIC, $array);
8        foreach ($array as $key => $value) {
9            echo $value['number'] . '番　' . $value['name']['name-JP'] . '：' . $value['physical']['height'] . 'cm　' . $value['physical']['weight'] . 'kg<br>';
10        }
11    } elseif ( strcmp($return, "sort2") == 0 ) {
12        array_multisort(array_column($array, 'name-EN'), SORT_ASC, SORT_NUMERIC, $array);
13        foreach ($array as $key => $value) {
14            echo $value['number'] . '番　' . $value['name']['name-JP'] . '：' . $value['physical']['height'] . 'cm　' . $value['physical']['weight'] . 'kg<br>';
15        }
16    } elseif ( strcmp($return, "sort3") == 0 ) {
17        array_multisort(array_column($array, 'height'), SORT_ASC, SORT_NUMERIC, $array);
18        foreach ($array as $key => $value) {
19            echo $value['number'] . '番　' . $value['name']['name-JP'] . '：' . $value['physical']['height'] . 'cm　' . $value['physical']['weight'] . 'kg<br>';
20        }
21    }
22
23    exit;

試したこと

array_multisort(array_column($array, 'number'), SORT_ASC, SORT_NUMERIC, $array);で出席番号順はソート出来たのですが、配列になっているローマ字の名前、身長を同じように取得する事が出来ませんでした。

ajaxから受け取った値を$returnに入れ、比較して$returnがsort1であったら出席番号順、sort2であったら名前順のように処理を分けたいです。
if以降を削除すると<div id="return">に「sort1」など文字列が返されます。

上記のやり方でなくても、ページ遷移をせずにソート出来るやり方があれば他のやり方でも構いません。

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

index.phpにarray()配列とHTML、JavaScriptを記載、
ajax.phpにPHPのコードを記載しています。
jQueryのバージョンは3.6.0です。

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

回答1件

上記のやり方でなくても、ページ遷移をせずにソート出来るやり方があれば他のやり方でも構いません。

新しいデータが不要なら、JavaScriptサイドでソートするのが合理的かと思います。

投稿2022/08/05 15:30

maisumakun

総合スコア145184

uzr1709

2022/08/06 04:05

回答ありがとうございます。 JavaScriptでPHPの配列にアクセスするという事でしょうか？それとも、PHPの配列をJavaScriptに渡して、JavaScript側でソートするという事でしょうか？後者ですとデータが多くなると処理も重くなると思うのですが。全く思いつかなかった手法のため、申し訳ないのですが検索ワードなど取っ掛かりを頂けないでしょうか。