Simple Javascript | Array .map(); method

[Nitin Panchal]

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

[tahnalos]

Hi, just saw this and think this will help me in solving a problem involving a very complicated data structure that I am working on.

Regarding the Map function, can you reference a call to a script include function instead of building a function inside the map itself?  It would help to simplify the code especially since I may be making multiple map calls on the same data structure.

Thanks

[Nitin Panchal]

@tahnalos Apologies for the very late reply here.
Yes, something like the below can be done. 

//Script include: 

var EmployeeUtils = Class.create();
EmployeeUtils.prototype = {
    initialize: function() {},

    getEmployeeId: function(emp) {
        return emp.employeeId;
    },

    getFullName: function(emp) {
        return emp.firstName + ' ' + emp.lastName;
    },

    getInitials: function(emp) {
        return emp.firstName.charAt(0) + '.' + emp.lastName.charAt(0) + '.';
    },

    type: 'EmployeeUtils'
};

Below is how to use the script include.

//Script include usage
var utils = new EmployeeUtils();

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 ids = employeeData.map(function(emp) {
    return utils.getEmployeeId(emp);
});

var fullNames = employeeData.map(function(emp) {
    return utils.getFullName(emp);
});

var initials = employeeData.map(function(emp) {
    return utils.getInitials(emp);
});

gs.log('Employee IDs: ' + ids.join(', '));
gs.log('Full Names: ' + fullNames.join(', '));
gs.log('Initials: ' + initials.join(', '));

Thank you !