これを想像してみてください。API呼び出しのセットアップと動作が完了しました。 データはあなたが期待したもので戻ってきます。 今？ そのデータを使用して、探しているソリューションを作成します。 突然、コンソールにエラーが表示されます。

何が起こったのですか、そしてなぜこのobject.map is not a functionですか？ 調べるために読んでください。

問題

エラーの原因は実際には非常に単純です.map()メソッドは、配列を操作する場合にのみ適用できます。 より具体的には、メソッドはArrayプロトタイプにArray.prototype.map()として存在します。

この方法は、もともとES5で2009年に導入されたもので、多くのシナリオで非常に役立ちます。 Array.map()は、唯一のパラメーターとしてコールバック関数を取ります。 そのコールバックには、現在のアイテムと配列内のそのインデックスの2つのパラメーターが与えられます。 メソッド自体は、 Array.forEach()の呼び出しと同様に機能しますが、コールバックの戻り値が、メソッド自体によって返される新しい配列にまとめられる点が異なります。

たとえば、数値の配列があり、元の配列の各数値が2倍になる新しい配列を作成する場合は、次のようにするだけです。

 const items = [ 1 , 2 , 3 ]; // ES5 approach const doubledItems = items.map( function ( item ) { return item * 2 ; }); // ES6+ approach const doubledItems = items.map( ( item ) => { return item * 2 ; }); // Least code approach const doubledItems = items.map( ( item ) => item * 2 ); console .log(doubledItems); // [2, 4, 6]
 コード言語： JavaScript （ javascript ）

ソリューション

object.map is not a functionを解決するには、最初に操作しているデータの形状を把握し、次にデータが何であるかに応じてそのデータから配列を作成します。 たとえば、データが単純なオブジェクトであるのに、探していた配列が実際にはそのオブジェクト内にあるとします。 その場合は、ドット表記を使用して目的のプロパティにアクセスします。

 const object = { items : [ { id : 1 , data : "item 1 data" , }, { id : 2 , data : "item 2 data" , }, ], }; const error = object.map( ( item ) => item.data); // This will cause your error! // Instead, map over the items property rather than the parent object const result = object.items.map( ( item ) => item.data); console .log(result); // ["item 1 data", "item 2 data"]
 コード言語： JavaScript （ javascript ）

データが単純なオブジェクトである可能性もありますが、繰り返したいデータはオブジェクトの各キーに保存されます。 その場合、これらのキーをループして、各キーのそれぞれの値に対してロジックを実行できます。

 const object = { 1 : { id : "1" , data : "item 1 data" , }, 2 : { id : "2" , data : "item 2 data" , }, }; const error = object.map( ( item ) => item.data); // This will cause your error! // Get an array of the keys in your object const array = Object .keys(object); // [1, 2] // Loop through that array using each key to get the value const result = array.map( ( key ) => { const value = object[key]; // Perform your desired logic here then return a new value return value.data; }); console .log(result); // ["item 1 data", "item 2 data"]
 コード言語： JavaScript （ javascript ）

JavaScript SetまたはMapを使用する場合は、別の一般的なソリューションが必要です。 これらは両方とも反復可能であり、 .forEach()メソッドもあるため、 .map()も機能すると合理的に想定できます。 ただし、これらは技術的には配列ではないため、回避策が必要になります。 解決策はSetとMapの両方で類似しており、ここで表示できる値をより詳細に操作する方法を説明する記事もあります。

 // --- Map solution example --- const myMap = new Map (); myMap.set( 1 , "item 1 data" ); myMap.set( 2 , "item 2 data" ); const myMapError = myMap.map(); // This will cause your error! // Create an array from the values of the Map const myMapArray = [...myMap.values()]; const myMapResult = myMapArray.map( ( item ) => { // Perform your logic here if (item) { return item; } }); console .log(myMapResult); // ["item 1 data", "item 2 data"] // --- Set solution example --- const mySet = new Set (); mySet.add( "item 1 data" ); mySet.add( "item 2 data" ); // Since set values are unique this won't be added to the Set mySet.add( "item 2 data" ); const mySetError = mySet.map(); // This will cause your error! const mySetArray = [...mySet.values()]; const mySetResult = mySetArray.map( ( item ) => { // Perform your logic here if (item) { return item; } }); console .log(mySetResult); // ["item 1 data", "item 2 data"]
 コード言語： JavaScript （ javascript ）

将来エラーを回避したい場合、特にArray.map()を呼び出そうとしているデータの正確な形状がわからない場合は、配列の値を安全にマップするための簡単な関数を次に示します。

 const safelyMap = ( data, callback ) => { if (!(data && Array .isArray(data))) { return []; } return data.map(callback); }; // Arbitrary callback function const callback = ( item ) => item; console .log(safelyMap( null , callback)); // [] console .log(safelyMap( new Set (), callback)); // [] console .log(safelyMap([ 1 , 2 , 3 ], callback)); // [1, 2, 3]
 コード言語： JavaScript （ javascript ）

これらの解決策の1つが特定のケースを解決することを願っていますが、そうでない場合は、コメントを残してください。喜んでお手伝いさせていただきます。