Imagínese esto: tiene su llamada API configurada y funcionando. Los datos regresan con lo que esperabas. ¿Ahora? Es hora de trabajar con esos datos para crear la solución que está buscando. De repente, ve un error en su consola.

¿Qué sucedió y por qué ve este object.map is not a function ? Siga leyendo para averiguarlo.

El problema

La causa de su error es bastante simple: el método .map() solo es aplicable cuando se trabaja con matrices. Más específicamente, el método existe en el prototipo Array como Array.prototype.map() .

Este método se introdujo originalmente en 2009 con ES5 y es muy útil en muchos escenarios. Array.map() toma una función de devolución de llamada como su único parámetro. Esa devolución de llamada recibe dos parámetros: el elemento actual y su índice en la matriz. El método en sí funciona de manera similar a llamar a Array.forEach() excepto que los valores de retorno de la devolución de llamada se juntan en una nueva matriz que devuelve el propio método.

Por ejemplo, si tiene una matriz de números y desea crear una nueva matriz en la que se duplique cada número de la matriz original, simplemente puede hacer esto:

 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]
 Lenguaje de código: JavaScript ( javascript )

La solución

Para resolver el object.map is not a function , primero averigüe la forma de los datos con los que está trabajando y luego cree una matriz a partir de esos datos dependiendo de cuáles sean los datos. Por ejemplo, tal vez sus datos sean un objeto simple, pero la matriz que estaba buscando está realmente dentro de ese objeto. En ese caso, simplemente use la notación de puntos para acceder a la propiedad deseada:

 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"]
 Lenguaje de código: JavaScript ( javascript )

También es posible que sus datos sean un objeto simple, pero los datos sobre los que le gustaría iterar se almacenan en cada clave del objeto. En ese caso, podría recorrer esas claves y realizar su lógica en el valor respectivo de cada clave:

 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"]
 Lenguaje de código: JavaScript ( javascript )

Se necesita otra solución común cuando se trabaja con un Set o Map de JavaScript. Debido a que estos son iterables e incluso tienen un método .forEach() , puede suponer razonablemente que .map() también funcionaría. Sin embargo, dado que técnicamente no son matrices, necesitará una solución alternativa. La solución es similar tanto para un Set como para un Map e incluso tenemos un artículo que explica cómo trabajar con sus valores con más detalle que puedes ver aquí.

 // --- 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"]
 Lenguaje de código: JavaScript ( javascript )

Si desea evitar el error en el futuro, especialmente si no conoce la forma exacta de los datos en los que intentará llamar a Array.map() , aquí hay una función simple para mapear de manera segura los valores de una matriz:

 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]
 Lenguaje de código: JavaScript ( javascript )

Esperemos que una de estas soluciones resuelva su caso específico, pero si no es así, deje un comentario y estaremos encantados de ayudarle.