Why Receiving an error while iterating over a map in javascript in LWC - “e.map is not a function”?

365 Asked by Aalapprabhakaran in Salesforce , Asked on Jul 12, 2021

I am getting a different error “e.map is not a function” and can not seem to figure it out now for a coupe of hours,

Here's my code :

createMapMarkers(boatData) { console.log('DATA :'+boatData); const newMarkers = boatData.map((boat) => { return { title : boat.Name, location : { Latitude : boat.Geolocation__Latitude__s, Longitude : boat.Geolocation__Longitude__s } } }); newMarkers.unshift({ title : LABEL_YOU_ARE_HERE, icon : ICON_STANDARD_USER, location : { Latitude : this.latitude, Longitude : this.longitude } }); this.mapMarkers = newMarkers; this.isLoading = false; }

I am getting this error :

modules/c/boatsNearMe.js:4 Uncaught (in promise) TypeError: LWC component's u/wire target property or method threw an error during value provisioning. Original error: [e.map is not a function] at h.createMapMarkers (modules/c/boatsNearMe.js:4) at h.wiredBoatsJSON (modules/c/boatsNearMe.js:4) at b.dispatchEvent (aura_prod.js:6) at yi (/components/force/lds.js:2) at eval (/components/force/lds.js:2) at eval (/components/force/lds.js:2)

I checked the piece of code by running on Here on Mozilla and it worked perfectly. It is only throwing error in LWC. Why getting this error?

Answered by Aashish chaursiya

Reason for getting an error: The above code has correct syntax provided boatData is an array. It looks like the Javascript object you have boat data is not an Array and hence you get an exception that .map is not a function.

You can easily reproduce this with below Javascript code

    let object_x = {}; object_x.map( x => { return x; });

This will result in an error Error: object_x.map is not a function Looks like the boatData is a JSON string and you can use JSON.parse(boatData) to cast to the Javascript array.

Why Receiving an error while iterating over a map in javascript in LWC - “e.map is not a function”?

Your Answer