logo

NJP

Simple Javascript | Array .map(); method

Import · Jan 03, 2020 · article

Hi there,

In this article I will describe the use case of map Javascript function and how it can be used in ServiceNow.

For example you have a JSON array of employee data and at the end result you only need array collection of employeeId. There are three main different ways to achieve this. One with for loop , second with foreach loop and lastly with map.

//JSON Array
var employeeData = [
  { employeeId: 11, firstName: 'Jack',lastName: 'Smith' },
  { employeeId: 22, firstName: 'Tony',lastName: 'Stark'},
  { employeeId: 33, firstName: 'Taylor',lastName: 'Fogerty' },
  { employeeId: 44, firstName: 'Sheldon',lastName: 'Cooper' }
];
// output required. 
[11, 22, 33, 44]

1) for loop

 // For loop Example. 
//JSON Array 
var employeeData = [
{ employeeId: 11, firstName: 'Jack',lastName: 'Smith' },
{ employeeId: 22, firstName: 'Tony',lastName: 'Stark'},
{ employeeId: 33, firstName: 'Taylor',lastName: 'Fogerty' },
{ employeeId: 44, firstName: 'Sheldon',lastName: 'Cooper' }
];

var resultArray=[];

for (var i=0;i<employeeData.length;i++){
 resultArray.push(employeeData[i].employeeId);
}

for(var j=0;j<resultArray.length;j++){
 gs.print(resultArray[j]);
}

//output
*** Script: 11
*** Script: 22
*** Script: 33
*** Script: 44

2) For each loop

//For each loop example. 

//JSON Array For each loop
var employeeData = [    
{ employeeId: 11, firstName: 'Jack',lastName: 'Smith' },
{ employeeId: 22, firstName: 'Tony',lastName: 'Stark'},
{ employeeId: 33, firstName: 'Taylor',lastName: 'Fogerty' },
{ employeeId: 44, firstName: 'Sheldon',lastName: 'Cooper' }
];
var resultArray=[];
for (var id in employeeData){
    resultArray.push(employeeData[id].employeeId);  
}

for(var j=0;j<resultArray.length;j++){
    gs.print(resultArray[j]);
}

//output 
*** Script: 11
*** Script: 22
*** Script: 33
*** Script: 44

and final using function map();

/// MAP example 
//JSON Array
var employeeData = [
{ employeeId: 11, firstName: 'Jack',lastName: 'Smith' },
{ employeeId: 22, firstName: 'Tony',lastName: 'Stark'},
{ employeeId: 33, firstName: 'Taylor',lastName: 'Fogerty' },
{ employeeId: 44, firstName: 'Sheldon',lastName: 'Cooper' }
];

var returnedOutput = employeeData.map(function(input) { 
    return input.employeeId; 
    }
);
gs.log('Returned Result-->'+returnedOutput +'   and type is -->'+typeof returnedOutput);

//returnedOutput can be loop through. 
for (var i=0;i<returnedOutput.length;i++){
    gs.log(returnedOutput[i]);
}

//output 
*** Script: Returned Result-->11,22,33,44   and type is -->object
*** Script: 11
*** Script: 22
*** Script: 33
*** Script: 44

Three things to note here for using function map();

1) Notice that you no longer need separate array to hold result output like for and foreach loop because map function it self returns a new array with each element being the result of the callback function. This means, one less loop iteration to store result collection !

2) The resulting array (returnedOutput) will be the same length as the original array (employeeData).

3) map function takes two arguments first one is callback function and second is optional array context.

map function could be great alternative to for and foreach loops when you need certain information from given collection array. This will make your code clean and easily readable.

Thanks for reading. Please feel free to comment and suggestions.

If this article helped you in any way, please then bookmark it or mark it as helpful.

Kind regards,

Nitin

View original source

https://www.servicenow.com/community/developer-articles/simple-javascript-array-map-method/ta-p/2324902