Mastering the functionality of array.map()

Question

Mastering the functionality of array.map()

Apologies for the simplicity of my query.

I am in the process of streamlining some code and have been exploring the use of array.map rather than traditional for loops to iterate through arrays and using array.push. I've managed to grasp the fundamentals, but I'm facing difficulties when trying to add a conditional statement. Here is my current code snippet:

var masterArray = [{
    "masterName": "One",
    "minorArray": []
  },
  {
    "masterName": "Two",
    "minorArray": ["A", "B", "C"]
  },
  {
    "masterName": "Three",
    "minorArray": ["Q", "W", "E", "R", "T", "Y"]
  },
  {
    "masterName": "Four",
    "minorArray": [1, 2, 3, 4, 5]
  },


];
var minorArray = [];

var setMinorArray = function(value) {
  var selectedName = value;

  for (var i = 0; i < masterArray.length; i++) {
    if (masterArray[i].masterName == selectedName) {
      minorArray = [];
      minorArray = masterArray[i].minorArray;
      break;
    }
  }

  console.log(minorArray);
};

setMinorArray("Three");

Since I need compatibility with IE11 users, I am unable to utilize arrow functions. Any guidance on this would be greatly appreciated.

Thank you so much

javascript arrays

Answer 1

Answer №1

map isn't the best choice here - you should be using find to locate an element in the array:

var masterArray = [{
    "masterName": "One",
    "minorArray": []
  },
  {
    "masterName": "Two",
    "minorArray": ["A", "B", "C"]
  },
  {
    "masterName": "Three",
    "minorArray": ["Q", "W", "E", "R", "T", "Y"]
  },
  {
    "masterName": "Four",
    "minorArray": [1, 2, 3, 4, 5]
  },


];
var setMinorArray = function(value) {
  var minorArray = masterArray.find(x => x.masterName === value).minorArray;

  console.log(minorArray);
};

setMinorArray("Three");

Answer 2

map isn't the best choice here - you should be using find to locate an element in the array:

var masterArray = [{
    "masterName": "One",
    "minorArray": []
  },
  {
    "masterName": "Two",
    "minorArray": ["A", "B", "C"]
  },
  {
    "masterName": "Three",
    "minorArray": ["Q", "W", "E", "R", "T", "Y"]
  },
  {
    "masterName": "Four",
    "minorArray": [1, 2, 3, 4, 5]
  },


];
var setMinorArray = function(value) {
  var minorArray = masterArray.find(x => x.masterName === value).minorArray;

  console.log(minorArray);
};

setMinorArray("Three");

Answer 3

Answer №2

Using the map() function in this scenario would not be appropriate. The ideal use case for map() is to create a new array containing processed elements from the original array. However, in your loop, the condition is checked before processing each element, and the loop exits after processing that element.

Instead, you should consider utilizing the find() function. This method returns the first element that satisfies a specific condition.

var masterArray = [{
    "masterName": "One",
    "minorArray": []
  },
  {
    "masterName": "Two",
    "minorArray": ["A", "B", "C"]
  },
  {
    "masterName": "Three",
    "minorArray": ["Q", "W", "E", "R", "T", "Y"]
  },
  {
    "masterName": "Four",
    "minorArray": [1, 2, 3, 4, 5]
  },
];
var minorArray = [];

var setMinorArray = function(value) {
  var found = masterArray.find(({masterName}) => masterName == value);
  if (found) {
    minorArray = found.minorArray;
  }
  console.log(minorArray);
};

setMinorArray("Three");

Answer 4

Using the map() function in this scenario would not be appropriate. The ideal use case for map() is to create a new array containing processed elements from the original array. However, in your loop, the condition is checked before processing each element, and the loop exits after processing that element.

Instead, you should consider utilizing the find() function. This method returns the first element that satisfies a specific condition.

var masterArray = [{
    "masterName": "One",
    "minorArray": []
  },
  {
    "masterName": "Two",
    "minorArray": ["A", "B", "C"]
  },
  {
    "masterName": "Three",
    "minorArray": ["Q", "W", "E", "R", "T", "Y"]
  },
  {
    "masterName": "Four",
    "minorArray": [1, 2, 3, 4, 5]
  },
];
var minorArray = [];

var setMinorArray = function(value) {
  var found = masterArray.find(({masterName}) => masterName == value);
  if (found) {
    minorArray = found.minorArray;
  }
  console.log(minorArray);
};

setMinorArray("Three");

Answer 5

Answer №3

While Array.map may not be the ideal tool for this task, it can still be used in a creative way if necessary:


const mainArray = [
  { mainName: 'One', subArray: [] },
  { mainName: 'Two', subArray: ['A', 'B', 'C'] },
  { mainName: 'Three', subArray: ['Q', 'W', 'E', 'R', 'T', 'Y'] },
  { mainName: 'Four', subArray: [1, 2, 3, 4, 5] },
]

const selectedValues = ['Three', 'Two']

const subItems = mainArray
  .map(({ mainName, subArray: sa }) => selectedValues.includes(mainName) ? sa : [] )
  .join(',')
  .split(',')
  .filter(item => !!item)

console.info({ subItems }) // output will be ["A", "B", "C", "Q", "W", "E", "R", "T", "Y"]

Answer 6

While Array.map may not be the ideal tool for this task, it can still be used in a creative way if necessary:


const mainArray = [
  { mainName: 'One', subArray: [] },
  { mainName: 'Two', subArray: ['A', 'B', 'C'] },
  { mainName: 'Three', subArray: ['Q', 'W', 'E', 'R', 'T', 'Y'] },
  { mainName: 'Four', subArray: [1, 2, 3, 4, 5] },
]

const selectedValues = ['Three', 'Two']

const subItems = mainArray
  .map(({ mainName, subArray: sa }) => selectedValues.includes(mainName) ? sa : [] )
  .join(',')
  .split(',')
  .filter(item => !!item)

console.info({ subItems }) // output will be ["A", "B", "C", "Q", "W", "E", "R", "T", "Y"]

Answer 7

Answer №4

You can easily transform the array into a key-value lookup object using the reduce method, which has been supported since IE 9:

var mainArray = [ { "mainName": "One", "subArray": [] },
                    { "mainName": "Two", "subArray": ["A", "B", "C"] },
                    { "mainName": "Three", "subArray": ["Q", "W", "E", "R", "T", "Y"] },
                    { "mainName": "Four", "subArray": [1, 2, 3, 4, 5] } ];

var keyValueObj = mainArray.reduce(function(obj, item) { 
                               return (obj[item.mainName] = item.subArray, obj); }, {});

console.log( keyValueObj["Three"] );

Answer 8

You can easily transform the array into a key-value lookup object using the reduce method, which has been supported since IE 9:

var mainArray = [ { "mainName": "One", "subArray": [] },
                    { "mainName": "Two", "subArray": ["A", "B", "C"] },
                    { "mainName": "Three", "subArray": ["Q", "W", "E", "R", "T", "Y"] },
                    { "mainName": "Four", "subArray": [1, 2, 3, 4, 5] } ];

var keyValueObj = mainArray.reduce(function(obj, item) { 
                               return (obj[item.mainName] = item.subArray, obj); }, {});

console.log( keyValueObj["Three"] );

Mastering the functionality of array.map()

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Splitting a DOMNodeList into an array of chunks using PHP

Restrict HTML Content in Json Result using PHP and Jquery

Encountering a 500 (Internal Server Error) while trying to insert data into the database through ajax

Set a value within a string array as the string property for each item in an array of custom objects

Exploring the functionalities of radio buttons and arrays in a Javascript experiment

Embed message from a Discord Bot

Azure Function App experiencing unexpected delay in async operations

Encountering JSON parsing errors while using fetch() POST requests in Express

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

Showcasing text behind an element with reduced opacity when the element directly above it is selected using rails, CSS, and jQuery

Limit the picture file size to 20 kilobytes with jQuery on the front end

Utilizing AngualarJS to bind data to intricate objects using the $resource functionality

Incorporate a Google Chart link by integrating it with a select handler

Progressive reloading page with Jquery Ajax upload

Bringing in Vue from 'vue' allows for the incorporation of 'different' Vue to diverse documents

Parsing JSON data as files are being read in an asynchronous manner

Ways to retrieve information from a intricate JSON structure?

Submit simple text via XMLHttpRequest to an Express server

Issues with the Winston transport for Loggly are causing inconsistent performance

Tips for safely executing an SQL query with electron.js