【Laravel】フロント(JavaScript)へ渡した配列のソートがリセットされる件について

概要

コレクション配列をソートして、フロント(JavaScript)へ渡した際にソートは正しく実行されているはずが、データを受け取るとソートがリセットされてしまう問題に直面しました。

原因

コレクション配列は値をキーと共に保持し、通常は0から始まる連続した数値インデックスを持ちます。

しかし、ソートした場合インデックスはリセットされないので、正しくソートされていたとしてもJavaScriptでデータを受け取るときには、そのインデックスで再度並び替えられてしまいソートがリセットされてしまいます。

解決策

この問題を解決するために、valuesメソッドを使用します。

このメソッドは、コレクション内のすべての値を新しい0から始まる連続した数値インデックスで再構築し、ソートを保持します。

以下のようなコレクションがあるとします。

$collection = collect([
    ['name' => 'E. Haaland', 'score' => 85],
    ['name' => 'Messhi', 'score' => 92],
    ['name' => 'Neymar', 'score' => 78],
]);

このコレクションをスコアの降順でソートした場合

$sortedCollection = $collection->sortByDesc('score');

$sortedCollectionは次のようになります。

Illuminate\Support\Collection 
[items:protected] => Array
        (
            [1] => Array
                (
                    [name] => Messhi
                    [score] => 92
                )

            [0] => Array
                (
                    [name] => E. Haaland
                    [score] => 85
                )

            [2] => Array
                (
                    [name] => Neymar
                    [score] => 78
                )

        )

ソートされたコレクションを見てみると、キー（インデックス）がリセットされていません。

そこで、valuesメソッドを使用して次のようにインデックスを再構築することができます。

$sortedCollection->values();

$sortedCollectionは次のようになり、キーが再構築されたデータが格納されています。

Illuminate\Support\Collection 
[items:protected] => Array
        (
            [0] => Array
                (
                    [name] => Messhi
                    [score] => 92
                )

            [1] => Array
                (
                    [name] => E. Haaland
                    [score] => 85
                )

            [2] => Array
                (
                    [name] => Neymar
                    [score] => 78
                )

        )

valuesメソッドをソートされたコレクションに使用することで、インデックスが再構築されフロントでソートを維持したまま受け取ることができるようになります。

参考