Bayangkan ini: Anda telah menyiapkan panggilan API dan berfungsi. Data kembali dengan apa yang Anda harapkan. Sekarang? Saatnya bekerja dengan data tersebut untuk menciptakan solusi yang Anda cari. Tiba-tiba, Anda melihat kesalahan di konsol Anda.

Apa yang terjadi, dan mengapa Anda melihat object.map is not a function ? Baca terus untuk mengetahuinya.

Masalah

Penyebab kesalahan Anda sebenarnya cukup sederhana: metode .map() hanya berlaku saat bekerja dengan array. Lebih khusus lagi, metode ini ada pada prototipe Array sebagai Array.prototype.map() .

Metode ini awalnya diperkenalkan pada tahun 2009 dengan ES5 dan sangat berguna dalam banyak skenario. Array.map() mengambil fungsi panggilan balik sebagai satu-satunya parameternya. Panggilan balik itu diberikan dua parameter: item saat ini dan indeksnya dalam array. Metode itu sendiri bekerja mirip dengan memanggil Array.forEach() kecuali nilai kembalian dari panggilan balik disatukan ke dalam array baru yang dikembalikan oleh metode itu sendiri.

Misalnya, jika Anda memiliki larik angka dan ingin membuat larik baru di mana setiap nomor dalam larik asli digandakan, Anda cukup melakukan ini:

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

Solusinya

Untuk mengatasi object.map is not a function , pertama-tama cari tahu bentuk data yang sedang Anda kerjakan dan kemudian buat array dari data itu tergantung pada datanya. Misalnya, mungkin data Anda adalah objek sederhana tetapi array yang Anda cari sebenarnya ada di dalam objek itu. Dalam hal ini, cukup gunakan notasi titik untuk mengakses properti yang diinginkan:

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

Mungkin juga data Anda adalah objek sederhana tetapi data yang ingin Anda ulangi disimpan di setiap kunci objek. Dalam hal ini Anda dapat mengulang kunci-kunci itu dan melakukan logika Anda pada nilai masing-masing kunci:

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

Solusi umum lainnya diperlukan saat Anda bekerja dengan JavaScript Set atau Map . Karena keduanya dapat diubah dan bahkan memiliki metode .forEach() Anda mungkin menganggap .map() juga akan berfungsi. Karena secara teknis mereka bukan array, Anda memerlukan solusi. Solusinya serupa untuk Set atau Map dan kami bahkan memiliki artikel yang menjelaskan cara bekerja dengan nilainya secara lebih rinci yang dapat Anda lihat di sini.

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

Jika Anda ingin menghindari kesalahan di masa mendatang, terutama jika Anda tidak tahu persis bentuk data yang akan Anda coba panggil Array.map() aktif, berikut adalah fungsi sederhana untuk memetakan nilai array dengan aman:

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

Semoga salah satu solusi ini memecahkan kasus spesifik Anda, tetapi jika tidak, silakan tinggalkan komentar dan kami akan dengan senang hati membantu.