如何在AJAX请求中保持Laravel集合转JSON后的排序顺序

Laravel集合调用sortBy/sortByDesc排序后，会保留原有元素的键名，不会重置为从0开始的连续数字索引。当这类集合被编码为JSON格式时，会被识别为JS对象而非索引数组，JS遍历对象时不会遵循你设置的排序规则，最终导致前端拿到的数据顺序错乱。
另外现有代码存在冗余逻辑：response()->json()本身会自动将数组/集合转为JSON格式，不需要额外手动调用json_encode()嵌套一层，多余的编码会增加解析出错的概率。

1. 后端：排序后重置集合索引 #

在所有排序逻辑执行完成、返回响应前，调用集合的values()方法重置键名，生成从0开始的连续索引，转JSON后就会被识别为标准索引数组，完整保留排序顺序。
修改后的控制器代码：

if($request->sort){
    switch($request->sort){
        case "date-asc":
            $events = $events->sortBy('date_début');
            break;

        case "date-desc":
            $events = $events->sortByDesc('date_début');
            break;

        case "prix-asc":
            $events = $events->sortBy('low');
            break;

        case "prix-desc":
            $events = $events->sortByDesc('low');
            break;

        default:
            return response()->json(['error'=>'Une erreur est survenue']);
    }
    // 重置索引，保证转JSON后为标准索引数组
    $events = $events->values();
    // 直接传入集合，无需手动调用json_encode
    return response()->json(['success'=> $events]);
}

2. 前端：简化解析逻辑 #

后端不再返回嵌套的JSON字符串后，前端不需要额外调用JSON.parse()，直接遍历返回的数组即可，遍历时优先使用回调传入的item对象读取属性，避免索引取值异常。
修改后的AJAX成功回调代码：

success:function(response)
{
    var data = response.success;
    var html = '';
    $('#content').empty();
    console.log(data);
    $.each(data, function(i, item) {
        html += `
            <p class="text-dark">${item.date_début}</p>
        `;
    });
    $('#content').html(html);
    $('#loading').addClass('d-none');
}

修改后可在浏览器控制台打印返回的data，如果数据类型为Array（数组）而非Object（对象），说明索引重置成功，排序顺序会和后端集合的排序结果完全一致。

内容的提问来源于stack exchange，提问作者Damian Rousseau