実現したいこと
1.配列の中にある配列をソートキーとして指定したい。
出席番号順(number)、名前順(name-EN)、身長順(height)を指定したい。
2.プルダウンの選択肢によってページ遷移せずに配列の値をソートして<div id="return">の中身として表示させたい。
PHP
$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
該当のソースコード
HTML
<select name="example" id="example"> <option value="sort1">出席番号</option> <option value="sort2">名前</option> <option value="sort3">身長</option> </select> <div id="return"></div>
JavaScript
$(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); }); }); });
PHP
$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です。
まだ回答がついていません
会員登録して回答してみよう