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

Question

実現したいこと

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

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

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

SyntaxError: Unexpected token < in JSON at position 17

該当のソースコード

<select name="example" id="example">
    <option value="sort1">出席番号</option>
    <option value="sort2">名前</option>
    <option value="sort3">身長</option>
</select>
<div id="return"></div>

$(function(){
    $("#example").change(function() {
        const str1 = $("#example").val();
        console.log(str1);
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: { "value" : str1 },
            dataType : "json"
        }).done(function(data){
            $("#return").append('<p>'+data.value+'</p>');
        }).fail(function(XMLHttpRequest, status, e){
            alert(e);
        });
    });
});

    $value = $_POST['value'];
    $return = array("value" => $value);
    header("Content-type: application/json; charset=UTF-8");
    echo json_encode($return);

    if ( strcmp($return, "sort1") == 0 ) {
        array_multisort(array_column($array, 'number'), SORT_ASC, SORT_NUMERIC, $array);
        foreach ($array as $key => $value) {
            echo $value['number'] . '番　' . $value['name']['name-JP'] . '：' . $value['physical']['height'] . 'cm　' . $value['physical']['weight'] . 'kg<br>';
        }
    } elseif ( strcmp($return, "sort2") == 0 ) {
        array_multisort(array_column($array, 'name-EN'), SORT_ASC, SORT_NUMERIC, $array);
        foreach ($array as $key => $value) {
            echo $value['number'] . '番　' . $value['name']['name-JP'] . '：' . $value['physical']['height'] . 'cm　' . $value['physical']['weight'] . 'kg<br>';
        }
    } elseif ( strcmp($return, "sort3") == 0 ) {
        array_multisort(array_column($array, 'height'), SORT_ASC, SORT_NUMERIC, $array);
        foreach ($array as $key => $value) {
            echo $value['number'] . '番　' . $value['name']['name-JP'] . '：' . $value['physical']['height'] . 'cm　' . $value['physical']['weight'] . 'kg<br>';
        }
    }

    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です。

Answer 1

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

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

Comments

[uzr1709]

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

[maisumakun]

> 後者ですとデータが多くなると処理も重くなると思うのですが。

（リストが何万件もあるような状況ならともかく）毎回通信してデータをやり取りするよりは負担が軽減されます。