Imaginez ceci : votre appel API est configuré et fonctionne. Les données reviennent avec ce que vous attendiez. À présent? Il est temps de travailler avec ces données pour créer la solution que vous recherchez. Tout d'un coup, vous voyez une erreur dans votre console.

Que s'est-il passé et pourquoi voyez-vous que object.map is not a function ? Continuez à lire pour le découvrir.

Le problème

La cause de votre erreur est en fait assez simple : la méthode .map() n'est applicable que lorsque vous travaillez avec des tableaux. Plus précisément, la méthode existe sur le prototype Array en tant que Array.prototype.map() .

Cette méthode a été initialement introduite en 2009 avec ES5 et est très utile dans de nombreux scénarios. Array.map() prend une fonction de rappel comme seul et unique paramètre. Ce rappel reçoit deux paramètres : l'élément actuel et son index dans le tableau. La méthode elle-même fonctionne de manière similaire à l'appel de Array.forEach() sauf que les valeurs de retour du rappel sont regroupées dans un nouveau tableau qui est renvoyé par la méthode elle-même.

Par exemple, si vous avez un tableau de nombres et que vous souhaitez créer un nouveau tableau où chaque nombre du tableau d'origine est doublé, vous pouvez simplement faire ceci :

 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]
 Langage de code : JavaScript ( javascript )

La solution

Pour résoudre l' object.map is not a function , déterminez d'abord la forme des données avec lesquelles vous travaillez, puis créez un tableau à partir de ces données en fonction de la nature des données. Par exemple, vos données sont peut-être un objet simple, mais le tableau que vous recherchez se trouve en fait à l'intérieur de cet objet. Dans ce cas, utilisez simplement la notation par points pour accéder à la propriété souhaitée :

 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"]
 Langage de code : JavaScript ( javascript )

Il est également possible que vos données soient un objet simple mais que les données que vous souhaitez parcourir soient stockées dans chaque clé de l'objet. Dans ce cas, vous pouvez parcourir ces clés et exécuter votre logique sur la valeur respective de chaque clé :

 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"]
 Langage de code : JavaScript ( javascript )

Une autre solution courante est nécessaire lorsque vous travaillez avec un JavaScript Set ou Map . Parce que ceux-ci sont à la fois itérables et ont même une méthode .forEach() , vous pouvez raisonnablement supposer que .map() fonctionnerait également. Puisqu'il ne s'agit pas techniquement de tableaux, vous aurez besoin d'une solution de contournement. La solution est similaire pour un Set ou une Map et nous avons même un article qui explique comment travailler avec leurs valeurs plus en détail que vous pouvez consulter ici.

 // --- 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"]
 Langage de code : JavaScript ( javascript )

Si vous voulez éviter l'erreur à l'avenir, surtout si vous ne connaissez pas la forme exacte des données sur lesquelles vous allez essayer d'appeler Array.map() , voici une fonction simple pour mapper en toute sécurité les valeurs d'un tableau :

 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]
 Langage de code : JavaScript ( javascript )

J'espère que l'une de ces solutions résoudra votre cas spécifique, mais si ce n'est pas le cas, veuillez laisser un commentaire et nous serons heureux de vous aider.