Представьте себе: у вас настроен и работает вызов API. Данные возвращаются с тем, что вы ожидали. Теперь? Пришло время поработать с этими данными, чтобы создать решение, которое вы ищете. Внезапно вы видите ошибку в своей консоли.

Что произошло и почему вы видите, что object.map is not a function ? Читай дальше что бы узнать.

Эта проблема

Причина вашей ошибки на самом деле довольно проста: метод .map() применим только при работе с массивами. В частности, этот метод существует в прототипе Array как Array.prototype.map() .

Этот метод был первоначально представлен в 2009 году в ES5 и очень полезен во многих сценариях. Array.map() принимает функцию обратного вызова в качестве единственного параметра. Этому обратному вызову задаются два параметра: текущий элемент и его индекс в массиве. Сам метод работает аналогично вызову Array.forEach() , за исключением того, что возвращаемые значения обратного вызова объединяются в новый массив, который возвращается самим методом.

Например, если у вас есть массив чисел и вы хотите создать новый массив, в котором каждое число в исходном массиве удваивается, вы можете просто сделать это:

 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 )

Надеемся, что одно из этих решений решит ваш конкретный случай, но если нет, оставьте комментарий, и мы будем рады помочь.