Immagina questo: hai la tua chiamata API impostata e funzionante. I dati tornano con quello che ti aspettavi. Adesso? È ora di lavorare con quei dati per creare la soluzione che stai cercando. All'improvviso, vedi un errore nella tua console.

Cosa è successo e perché vedi questo object.map is not a function ? Continuate a leggere per scoprirlo.

Il problema

La causa del tuo errore è in realtà abbastanza semplice: il metodo .map() è applicabile solo quando si lavora con gli array. Più specificamente, il metodo esiste sul prototipo Array come Array.prototype.map() .

Questo metodo è stato originariamente introdotto nel 2009 con ES5 ed è molto utile in molti scenari. Array.map() accetta una funzione di callback come suo unico e unico parametro. A tale callback vengono assegnati due parametri: l'elemento corrente e il relativo indice nell'array. Il metodo stesso funziona in modo simile alla chiamata di Array.forEach() eccetto che i valori di ritorno del callback vengono riuniti in un nuovo array che viene restituito dal metodo stesso.

Ad esempio, se hai una matrice di numeri e desideri creare una nuova matrice in cui ogni numero nella matrice originale viene raddoppiato, puoi semplicemente farlo:

 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]
 Linguaggio del codice: JavaScript ( javascript )

La soluzione

Per risolvere object.map is not a function , prima calcola la forma dei dati con cui stai lavorando e quindi crea un array da quei dati a seconda di quali sono i dati. Ad esempio, forse i tuoi dati sono un oggetto semplice ma l'array che stavi cercando è in realtà all'interno di quell'oggetto. In tal caso, usa semplicemente la notazione del punto per accedere alla proprietà desiderata:

 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"]
 Linguaggio del codice: JavaScript ( javascript )

È anche possibile che i tuoi dati siano un oggetto semplice, ma i dati su cui desideri eseguire l'iterazione sono archiviati in ciascuna chiave dell'oggetto. In tal caso potresti scorrere quelle chiavi ed eseguire la tua logica sul rispettivo valore di ciascuna chiave:

 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"]
 Linguaggio del codice: JavaScript ( javascript )

Un'altra soluzione comune è necessaria quando si lavora con un Set o una Map JavaScript. Poiché questi sono entrambi iterabili e hanno persino un metodo .forEach() , puoi ragionevolmente presumere che anche .map() funzioni. Dal momento che non sono tecnicamente array, tuttavia, avrai bisogno di una soluzione alternativa. La soluzione è simile sia per un Set che per una Map e abbiamo anche un articolo che spiega come lavorare con i loro valori in modo più dettagliato che puoi visualizzare qui.

 // --- 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"]
 Linguaggio del codice: JavaScript ( javascript )

Se vuoi evitare l'errore in futuro, specialmente se non conosci la forma esatta dei dati su cui proverai a chiamare Array.map() , ecco una semplice funzione per mappare in sicurezza i valori di un array:

 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]
 Linguaggio del codice: JavaScript ( javascript )

Speriamo che una di queste soluzioni risolva il tuo caso specifico, ma in caso contrario, lascia un commento e saremo felici di aiutarti.