Imaginează-ți asta: ai configurat apelul API și funcționează. Datele revin cu ceea ce vă așteptați. Acum? Este timpul să lucrați cu acele date pentru a crea soluția pe care o căutați. Dintr-o dată, vedeți o eroare în consola dvs.

Ce s-a întâmplat și de ce vezi că acest object.map is not a function ? Citiți mai departe pentru a afla.

Problema

Cauza erorii dvs. este de fapt destul de simplă: metoda .map() este aplicabilă numai atunci când lucrați cu matrice. Mai precis, metoda există pe prototipul Array ca Array.prototype.map() .

Această metodă a fost introdusă inițial în 2009 cu ES5 și este foarte utilă în multe scenarii. Array.map() ia o funcție de apel invers ca unic și singur parametru. Acelui apel invers i se dau doi parametri: elementul curent și indexul său în matrice. Metoda în sine funcționează similar cu apelarea Array.forEach() , cu excepția faptului că valorile returnate ale callback-ului sunt reunite într-o nouă matrice care este returnată de metoda însăși.

De exemplu, dacă aveți o matrice de numere și doriți să creați o nouă matrice în care fiecare număr din matricea originală este dublat, puteți face pur și simplu acest lucru:

 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]
 Limbajul codului: JavaScript ( javascript )

Soluția

Pentru a rezolva object.map is not a function , mai întâi dați seama de forma datelor cu care lucrați și apoi creați o matrice din acele date, în funcție de care sunt datele. De exemplu, poate că datele dvs. sunt un obiect simplu, dar matricea pe care o căutați se află de fapt în interiorul acelui obiect. În acest caz, utilizați doar notația cu puncte pentru a accesa proprietatea dorită:

 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"]
 Limbajul codului: JavaScript ( javascript )

De asemenea, este posibil ca datele dvs. să fie un obiect simplu, dar datele pe care doriți să le iterați sunt stocate în fiecare cheie a obiectului. În acest caz, puteți parcurge acele chei și puteți efectua logica pe valoarea fiecărei chei:

 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"]
 Limbajul codului: JavaScript ( javascript )

O altă soluție comună este necesară atunci când lucrați cu un Set sau o Map JavaScript. Deoarece acestea sunt ambele iterabile și chiar au o metodă .forEach() , puteți presupune în mod rezonabil că .map() ar funcționa și el. Deoarece nu sunt din punct de vedere tehnic matrice, veți avea nevoie de o soluție. Soluția este similară atât pentru un Set , cât și pentru o Map și avem chiar și un articol care explică cum să lucrezi cu valorile lor mai detaliat, pe care îl poți vizualiza aici.

 // --- 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"]
 Limbajul codului: JavaScript ( javascript )

Dacă doriți să evitați eroarea în viitor, mai ales dacă nu cunoașteți forma exactă a datelor pe care veți încerca să apelați Array.map() , iată o funcție simplă pentru a mapa în siguranță valorile unei matrice:

 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]
 Limbajul codului: JavaScript ( javascript )

Sperăm că una dintre aceste soluții vă rezolvă cazul specific, dar dacă nu, vă rugăm să lăsați un comentariu și vom fi bucuroși să vă ajutăm.