Wyobraź sobie: masz skonfigurowane i działające wywołanie API. Dane wracają zgodnie z oczekiwaniami. Teraz? Czas na pracę z tymi danymi, aby stworzyć rozwiązanie, którego szukasz. Nagle widzisz błąd w konsoli.

Co się stało i dlaczego ten object.map is not a function ? Czytaj dalej, aby się dowiedzieć.

Problem

Przyczyna błędu jest w rzeczywistości dość prosta: metoda .map() ma zastosowanie tylko podczas pracy z tablicami. Mówiąc dokładniej, metoda istnieje w prototypie Array jako Array.prototype.map() .

Ta metoda została pierwotnie wprowadzona w 2009 roku w ES5 i jest bardzo przydatna w wielu scenariuszach. Array.map() przyjmuje funkcję zwrotną jako jedyny parametr. To wywołanie zwrotne ma dwa parametry: bieżący element i jego indeks w tablicy. Sama metoda działa podobnie do wywołania Array.forEach() , z wyjątkiem tego, że wartości zwracane przez wywołanie zwrotne są umieszczane razem w nowej tablicy, która jest zwracana przez samą metodę.

Na przykład, jeśli masz tablicę liczb i chcesz utworzyć nową tablicę, w której każda liczba w oryginalnej tablicy jest podwojona, możesz po prostu zrobić to:

 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]
 Język kodu: JavaScript ( javascript )

Rozwiązanie

Aby rozwiązać object.map is not a function , najpierw ustal kształt danych, z którymi pracujesz, a następnie utwórz tablicę z tych danych w zależności od tego, jakie są dane. Na przykład, może twoje dane są prostym obiektem, ale szukana tablica znajduje się w rzeczywistości w tym obiekcie. W takim przypadku po prostu użyj notacji z kropkami, aby uzyskać dostęp do żądanej właściwości:

 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"]
 Język kodu: JavaScript ( javascript )

Możliwe jest również, że Twoje dane są prostym obiektem, ale dane, nad którymi chcesz iterować, są przechowywane w każdym kluczu obiektu. W takim przypadku możesz przejść przez te klucze i wykonać logikę na odpowiedniej wartości każdego klucza:

 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"]
 Język kodu: JavaScript ( javascript )

Inne popularne rozwiązanie jest potrzebne podczas pracy z Set JavaScript lub Map . Ponieważ obie są iterowalne, a nawet mają .forEach() , można rozsądnie założyć, że .map() również zadziała. Ponieważ technicznie nie są to tablice, będziesz potrzebować obejścia. Rozwiązanie jest podobne zarówno dla Set , jak i Map , a nawet mamy artykuł, który bardziej szczegółowo wyjaśnia, jak pracować z ich wartościami, który możesz zobaczyć tutaj.

 // --- 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"]
 Język kodu: JavaScript ( javascript )

Jeśli chcesz uniknąć błędu w przyszłości, zwłaszcza jeśli nie znasz dokładnego kształtu danych, na których będziesz próbował wywołać Array.map() , oto prosta funkcja do bezpiecznego mapowania wartości tablicy:

 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]
 Język kodu: JavaScript ( javascript )

Mam nadzieję, że jedno z tych rozwiązań rozwiąże Twój konkretny przypadek, ale jeśli nie, zostaw komentarz, a chętnie Ci pomożemy.