0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

個人開発エンジニア応援 - 個人開発の成果や知見を共有しよう!-

Laravel × Reactでmap関数にエラーが出るようになった

Last updated at Posted at 2023-10-15

はじめに

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) => {任意の処理})
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?