はじめに

LaravelとReactを使ったWebアプリ内で、dbからEloquentモデルを使って抽出したデータに対してJSのmap関数を使っていたところ、a.map is not a functionというエラーが出てアプリが動かなくなってしまい、その解決法を備忘録を兼ねてまとめました。

エラー原因

JSのmap関数は連想配列には使えないのですが、バックエンドから送られてきた配列が連想配列になってしまっていたことが原因でした。Eloquentモデルでデータ抽出をする際にwhere句を使うと、得られた配列のキーが0からの連番 (0,1,2...)にならないことがあり、そのような配列をJSに送ると連想配列になってしまうようです。おそらくJSの通常の配列はキーが0からの連番となる決まりがあるのだと思います。

解決策

解決策としては、phpでキーが0からの連番になるようにするか、JSで連想配列にも対応可能にするかの二通りが考えられます。
phpでの対処としては、配列を雑に作り直せばokです。スプレッド構文など使えば楽でしょう。

example.php

$array = [ ...array ]

追記：getした後にwhereで絞り込んだときのみキーが連番でなくなるっぽいので、モデル取得時にwhereのあとにgetできればそれでも良い。

JSでの対処としては、Objectを使って値の配列を作りそれに対してmap関数を適用するとできます。

example.js

Object.values(array).map((value) => {任意の処理})