Stellen Sie sich Folgendes vor: Sie haben Ihren API-Aufruf eingerichtet und funktionieren. Die Daten kommen mit dem zurück, was Sie erwartet haben. Jetzt? Zeit, mit diesen Daten zu arbeiten, um die Lösung zu erstellen, nach der Sie suchen. Plötzlich sehen Sie einen Fehler in Ihrer Konsole.

Was ist passiert und warum sehen Sie, dass object.map is not a function ist? Lesen Sie weiter, um es herauszufinden.

Das Problem

Die Ursache Ihres Fehlers ist eigentlich ganz einfach: Die Methode .map() ist nur anwendbar, wenn Sie mit Arrays arbeiten. Genauer gesagt existiert die Methode auf dem Array -Prototyp als Array.prototype.map() .

Diese Methode wurde ursprünglich 2009 mit ES5 eingeführt und ist in vielen Szenarien sehr nützlich. Array.map() nimmt eine Callback-Funktion als einzigen Parameter. Dieser Rückruf erhält zwei Parameter: das aktuelle Element und seinen Index im Array. Die Methode selbst funktioniert ähnlich wie der Aufruf von Array.forEach() , außer dass die Rückgabewerte des Callbacks zu einem neuen Array zusammengesetzt werden, das von der Methode selbst zurückgegeben wird.

Wenn Sie beispielsweise ein Array mit Zahlen haben und ein neues Array erstellen möchten, in dem jede Zahl im ursprünglichen Array verdoppelt wird, können Sie einfach Folgendes tun:

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

Die Lösung

Um den Fehler object.map is not a function zu lösen, müssen Sie zunächst die Form der Daten ermitteln, mit denen Sie arbeiten, und dann ein Array aus diesen Daten erstellen, je nachdem, um welche Daten es sich handelt. Vielleicht sind Ihre Daten beispielsweise ein einfaches Objekt, aber das Array, nach dem Sie gesucht haben, befindet sich tatsächlich in diesem Objekt. Verwenden Sie in diesem Fall einfach die Punktnotation, um auf die gewünschte Eigenschaft zuzugreifen:

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

Es ist auch möglich, dass Ihre Daten ein einfaches Objekt sind, aber die Daten, die Sie durchlaufen möchten, in jedem Schlüssel des Objekts gespeichert sind. In diesem Fall könnten Sie diese Schlüssel durchlaufen und Ihre Logik für den jeweiligen Wert jedes Schlüssels ausführen:

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

Eine weitere gängige Lösung wird benötigt, wenn Sie mit einem JavaScript- Set oder einer Map arbeiten. Da diese beide iterierbar sind und sogar eine .forEach() Methode haben, können Sie vernünftigerweise davon ausgehen, dass .map() auch funktionieren würde. Da es sich jedoch technisch gesehen nicht um Arrays handelt, benötigen Sie eine Problemumgehung. Die Lösung ist sowohl für ein Set als auch für eine Map ähnlich und wir haben sogar einen Artikel, der detaillierter erklärt, wie man mit ihren Werten arbeitet, den Sie hier einsehen können.

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

Wenn Sie den Fehler in Zukunft vermeiden möchten, insbesondere wenn Sie die genaue Form der Daten nicht kennen, für die Sie versuchen, Array.map() , finden Sie hier eine einfache Funktion, um die Werte eines Arrays sicher zuzuordnen:

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

Hoffentlich löst eine dieser Lösungen Ihren speziellen Fall, aber wenn nicht, hinterlassen Sie bitte einen Kommentar und wir helfen Ihnen gerne weiter.