Imagine isso: você tem sua chamada de API configurada e funcionando. Os dados voltam com o que você esperava. Agora? Hora de trabalhar com esses dados para criar a solução que você procura. De repente, você vê um erro no seu console.

O que aconteceu e por que você está vendo este object.map is not a function ? Leia mais para descobrir.

O problema

A causa do seu erro é bem simples: o método .map() só é aplicável ao trabalhar com arrays. Mais especificamente, o método existe no protótipo Array como Array.prototype.map() .

Este método foi originalmente introduzido em 2009 com o ES5 e é muito útil em muitos cenários. Array.map() recebe uma função de retorno de chamada como seu único parâmetro. Esse retorno de chamada recebe dois parâmetros: o item atual e seu índice na matriz. O método em si funciona de maneira semelhante à chamada de Array.forEach() , exceto que os valores de retorno do retorno de chamada são colocados juntos em um novo array que é retornado pelo próprio método.

Por exemplo, se você tem uma matriz de números e deseja criar uma nova matriz em que cada número na matriz original é duplicado, você pode simplesmente fazer isso:

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

A solução

Para resolver o object.map is not a function , primeiro descubra a forma dos dados com os quais você está trabalhando e, em seguida, crie uma matriz a partir desses dados, dependendo de quais são os dados. Por exemplo, talvez seus dados sejam um objeto simples, mas a matriz que você estava procurando está realmente dentro desse objeto. Nesse caso, basta usar a notação de ponto para acessar a propriedade desejada:

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

Também é possível que seus dados sejam um objeto simples, mas os dados sobre os quais você gostaria de iterar sejam armazenados em cada chave do objeto. Nesse caso, você pode percorrer essas chaves e executar sua lógica no respectivo valor de cada chave:

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

Outra solução comum é necessária quando você está trabalhando com um Set ou Map de JavaScript. Como eles são iteráveis ​​e até têm um método .forEach() , você pode razoavelmente supor que .map() também funcionaria. Como eles não são tecnicamente arrays, você precisará de uma solução alternativa. A solução é semelhante tanto para um Set quanto para um Map e temos até um artigo que explica como trabalhar com seus valores com mais detalhes que você pode ver aqui.

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

Se você quiser evitar o erro no futuro, especialmente se não souber a forma exata dos dados nos quais tentará chamar Array.map() , aqui está uma função simples para mapear com segurança os valores de um 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]
 Linguagem de código: JavaScript ( javascript )

Esperamos que uma dessas soluções resolva seu caso específico, mas se não, deixe um comentário e ficaremos felizes em ajudar.