Şunu hayal edin: API çağrı kurulumunuz ve çalışmanız var. Veriler beklediğiniz gibi geri gelir. Şimdi? Aradığınız çözümü oluşturmak için bu verilerle çalışma zamanı. Birden konsolunuzda bir hata görüyorsunuz.

Ne oldu ve neden bu object.map is not a function görüyorsunuz? Öğrenmek için okumaya devam edin.

Sorun

Hatanızın nedeni aslında oldukça basit: .map() yöntemi yalnızca dizilerle çalışırken geçerlidir. Daha spesifik olarak, yöntem Array prototipinde Array.prototype.map() olarak bulunur.

Bu yöntem ilk olarak 2009'da ES5 ile tanıtıldı ve birçok senaryoda çok kullanışlıdır. Array.map() , tek ve tek parametresi olarak bir geri çağırma işlevi alır. Bu geri aramaya iki parametre verilir: geçerli öğe ve dizideki dizini. Yöntemin kendisi, geri çağırmanın dönüş değerlerinin yöntemin kendisi tarafından döndürülen yeni bir dizide bir araya getirilmesi dışında, Array.forEach() i çağırmaya benzer şekilde çalışır.

Örneğin, bir sayı diziniz varsa ve orijinal dizideki her sayının iki katına çıktığı yeni bir dizi oluşturmak istiyorsanız, şunu yapabilirsiniz:

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

Çözüm

object.map is not a function çözmek için, önce üzerinde çalıştığınız verinin şeklini bulun ve ardından verinin ne olduğuna bağlı olarak bu verilerden bir dizi oluşturun. Örneğin, verileriniz basit bir nesne olabilir ancak aradığınız dizi aslında o nesnenin içindedir. Bu durumda, istenen özelliğe erişmek için nokta gösterimini kullanmanız yeterlidir:

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

Verilerinizin basit bir nesne olması da mümkündür, ancak yinelemek istediğiniz veriler nesnenin her anahtarında saklanır. Bu durumda, bu anahtarlar arasında dolaşabilir ve mantığınızı her bir anahtarın ilgili değerinde gerçekleştirebilirsiniz:

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

Bir JavaScript Set veya Map ile çalışırken başka bir ortak çözüm gerekir. Bunların her ikisi de yinelenebilir olduğundan ve hatta bir .forEach() yöntemine sahip olduklarından, makul bir şekilde .map() öğesinin de işe yarayacağını varsayabilirsiniz. Teknik olarak dizi olmadıkları için, bir geçici çözüme ihtiyacınız olacak. Çözüm, hem Set hem de Map için benzerdir ve burada görüntüleyebileceğiniz, değerleriyle nasıl çalışılacağını daha ayrıntılı olarak açıklayan bir makalemiz bile var.

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

Gelecekte bu hatayı önlemek istiyorsanız, özellikle Array.map() üzerinde çağırmaya çalışacağınız verilerin tam şeklini bilmiyorsanız, bir dizinin değerlerini güvenli bir şekilde eşlemek için basit bir fonksiyon aşağıda verilmiştir:

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

Umarım bu çözümlerden biri özel durumunuzu çözer, ancak değilse, lütfen bir yorum bırakın ve size yardımcı olmaktan memnuniyet duyarız.