こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
関数型のJavaScriptの書き方に不安がある人は、こちらの記事も併せてご覧下さい。
Qiita
こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこちらReactを仕事で使いこなしたい人、Re…
エラー内容
Uncaught TypeError: x.map is not a functionこのエラーはmapメソッドを配列以外のオブジェクトに対して呼び出そうとした場合に発生します。
該当のコード例
sample.map( item => {
// 処理
})今回の場合だと、sampleが配列じゃないといけないのに、オブジェクトである事が原因です！
mapメソッドは配列→新しい配列を作る
mapメソッドは配列に一律で処理を加えて、新しい配列を作るメソッドです。
例：usersから名前だけの配列を作る
<span class="hljs-keyword">const</span><span> users = [ <br /> { </span><span class="hljs-attr">id</span><span>: </span><span class="hljs-number">1</span><span>, </span><span class="hljs-attr">name</span><span>: </span><span class="hljs-string">'Alice'</span><span> },<br /> { </span><span class="hljs-attr">id</span><span>: </span><span class="hljs-number">2</span><span>, </span><span class="hljs-attr">name</span><span>: </span><span class="hljs-string">'Bob'</span><span> }, <br /> { </span><span class="hljs-attr">id</span><span>: </span><span class="hljs-number">3</span><span>, </span><span class="hljs-attr">name</span><span>: </span><span class="hljs-string">'Charlie'</span><span> } <br />];<br /><br />↓<br /><br /><span class="hljs-keyword">const</span> names = users.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">user</span> =></span> user.<span class="hljs-property">name</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(names); <span class="hljs-comment">// 出力: ['Alice', 'Bob', 'Charlie']</span><br /><br /><br /></span>
解決策：オブジェクトを配列にしてからmapメソッドを使う！
oObject.values()を使ってオブジェクトのキーを配列に変換してからmapメソッドを使いましょう！
以下のコードならエラーは出ずにmapを実行できる。
Object.values(sample).map(item => {
// 処理
})以上です！
フロントエンドでキャリアアップを考えているなら
関連記事
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 今回は大学中退してニートだった自分が完全未経験からメガベンチャーに入社した方法について解説していきます。 ・完全未経験から将来的なメガベンチャー転[…]
