Table of Contents
map is not a function in Javascript
TypeError: .map is not a function occurs when we call map() function on object which is not an array. map() function can be only called on array.
Let’s see with help of simple example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var numObj = { 'Numbers' : [ 1, 2, 3, ], 'NumberTexts':['ONE', 'TWO', 'THREE', ], } const result = numObj.map(num => { return num *2; }); console.log(result); |
You will get following error when you execute the program:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const result = numObj.map(element => { ^ TypeError: numObj.map is not a function at Object.<anonymous> (HelloWorld.js:18:23) at Module._compile (internal/modules/cjs/loader.js:959:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10) at Module.load (internal/modules/cjs/loader.js:815:32) at Function.Module._load (internal/modules/cjs/loader.js:727:14) at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10) at internal/main/run_main_module.js:17:11 |
We got this error because numObj is not an array, it is an object.
To correctly call map() function, we need to use numObj.Numbers. map() function will multiply elements of Numbers array by 2.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var numObj = { 'Numbers' : [ 1, 2, 3, ], 'NumberTexts':['ONE', 'TWO', 'THREE', ], } const result = numObj.Numbers.map(num => { return num *2; }); console.log(result); |
Output:
|
1 2 3 |
[2,4,6] |
You can avoid the error by using Array.isArray() method to check if value is an array. If it is not an array, then we can return empty value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var numObj = { 'Numbers' : [ 1, 2, 3, ], 'NumberTexts':['ONE', 'TWO', 'THREE', ], } const result = Array.isArray(numObj)?numObj.map(element => { return element *2; }):[]; console.log(result); |
Output:
|
1 2 3 |
[] |
As you can see numObj is not an array, so result is [].
If you have array like objects, then first convert them to array using Array.from() method and then call map method on it.
|
1 2 3 4 5 6 |
const countries = new Set(["India", "China", "Bhutan"]); const result = Array.from(countries).map(country => country.toUpperCase()); console.log(result); |
As you can see, we have converted set to Array using Array.from() method then called .map() function to convert country names to uppercase.
If you are getting this error while dealing with JSON, you need to make sure that you are calling
map()function only on arrays. It may be good idea to log the JSON on console and see if you are callingmap()on correct value.
map is not a function in react
If you are getting issue in react, you need to first check if calling object is array or not using Array.isArray() method.
|
1 2 3 |
Array.isArray(obj):/*call map function with logic*/:/*[]*/ |
If it is not an array, then you may need to convert your object to array and call .map() method on it.
That’s all about how to resolve .map is not a function in Javascript.
