Mapping Arrays in JavaScript

Question

Mapping Arrays in JavaScript

Imagine this situation;

var defaultArr = ['a', 'b', 'c', 'd'];
var availArr = [];
var selectedArr = [];

When passing certain index's values as parameters, the array needs to be split up.

For example:

If Array Index : 0,2

Desired outcome:

availArr = ['b', 'd'];
selectedArr = ['a', 'c'];

Is there a built-in method to accomplish this?

javascript arrays

Answer 1

Answer №1

Quite simple using the power of Array.reduce

var myArr = ['x', 'y', 'z', 'w'];
var positions = [1,3];

var output = myArr.reduce(function(previous, current, index){
  if(positions.indexOf(index) > -1)
    previous.chosenArr.push(current);
  else
    previous.remainingArr.push(current);
  return previous;
}, {remainingArr: [], chosenArr:[]});

console.log('remainingArr',output.remainingArr);
console.log('chosenArr',output.chosenArr);

This solution hinges on the concept that reduce accepts a callback function with 3 arguments - as seen in the example provided

previous the initial object passed in
current the element currently being processed
index the position of the current element

By utilizing this information and the indexOf method, we can effectively differentiate between arrays for storage.

Answer 2

Quite simple using the power of Array.reduce

var myArr = ['x', 'y', 'z', 'w'];
var positions = [1,3];

var output = myArr.reduce(function(previous, current, index){
  if(positions.indexOf(index) > -1)
    previous.chosenArr.push(current);
  else
    previous.remainingArr.push(current);
  return previous;
}, {remainingArr: [], chosenArr:[]});

console.log('remainingArr',output.remainingArr);
console.log('chosenArr',output.chosenArr);

This solution hinges on the concept that reduce accepts a callback function with 3 arguments - as seen in the example provided

previous the initial object passed in
current the element currently being processed
index the position of the current element

By utilizing this information and the indexOf method, we can effectively differentiate between arrays for storage.

Answer 3

Answer №2

If you want to manipulate arrays in JavaScript, you can utilize the Array#reduceRight method and cycle through the indices array.

var initialArray = ['x', 'y', 'z', 'w'],
    newArray = initialArray.slice(),
    selectedItems = [],
    indexList = [1, 3];

indexList.reduceRight(function (_, index) {
    selectedItems.unshift(newArray.splice(index, 1)[0]);
}, 0);

console.log(newArray);
console.log(selectedItems);

Answer 4

If you want to manipulate arrays in JavaScript, you can utilize the Array#reduceRight method and cycle through the indices array.

var initialArray = ['x', 'y', 'z', 'w'],
    newArray = initialArray.slice(),
    selectedItems = [],
    indexList = [1, 3];

indexList.reduceRight(function (_, index) {
    selectedItems.unshift(newArray.splice(index, 1)[0]);
}, 0);

console.log(newArray);
console.log(selectedItems);

Answer 5

Answer №3

var newArray = ['x', 'y', 'z', 'w'];
var availableItems = [];
var selectedItems = [];

function rearrangeArray(indices) {
  availableItems = newArray; 
  indices.forEach(function(index) {
    let value = availableItems.splice(index, 1)[0];
    selectedItems.push(value);
  })
}

rearrangeArray([0, 2]);

console.log(availableItems);
console.log(selectedItems);

Answer 6

var newArray = ['x', 'y', 'z', 'w'];
var availableItems = [];
var selectedItems = [];

function rearrangeArray(indices) {
  availableItems = newArray; 
  indices.forEach(function(index) {
    let value = availableItems.splice(index, 1)[0];
    selectedItems.push(value);
  })
}

rearrangeArray([0, 2]);

console.log(availableItems);
console.log(selectedItems);

Answer 7

Answer №4

To make use of Array methods such as forEach and includes

var data = ['x', 'y', 'z', 'w'];
var indices = [1, 3];
var options = [];
var choices = [];

data.forEach(function (item, index) {
  if (indices.includes(index)) {
    choices.push(item);
  } else {
    options.push(item);
  }
});

document.write(JSON.stringify({
  data: data,
  options: options,
  choices: choices
}));

Answer 8

To make use of Array methods such as forEach and includes

var data = ['x', 'y', 'z', 'w'];
var indices = [1, 3];
var options = [];
var choices = [];

data.forEach(function (item, index) {
  if (indices.includes(index)) {
    choices.push(item);
  } else {
    options.push(item);
  }
});

document.write(JSON.stringify({
  data: data,
  options: options,
  choices: choices
}));

Answer 9

Answer №5

When working in JS, Array.prototype.reduceRight() serves as the perfect functor for iterating through an array and modifying it by eliminating certain items. My preferred approach to this task would be:

var defaultArr = ['a', 'b', 'c', 'd'],
       indices = [0, 2];
        result = defaultArr.reduceRight((p,c,i,a) => indices.includes(i) ? p.concat(a.splice(i,1)) : p ,[]);
console.log(defaultArr,result);

Answer 10

When working in JS, Array.prototype.reduceRight() serves as the perfect functor for iterating through an array and modifying it by eliminating certain items. My preferred approach to this task would be:

var defaultArr = ['a', 'b', 'c', 'd'],
       indices = [0, 2];
        result = defaultArr.reduceRight((p,c,i,a) => indices.includes(i) ? p.concat(a.splice(i,1)) : p ,[]);
console.log(defaultArr,result);

Answer 11

Answer №6

To achieve this, you can utilize the array.splice method along with array.concat.

var defaultArr = ['a', 'b', 'c', 'd'];
var availArr = [];
var selectedArr = [];

function manipulateIndexes(indexArr){
  var deleteCount = 0;
  availArr = defaultArr.map(x=>x);
  indexArr.forEach(function(i){
    selectedArr = selectedArr.concat(availArr.splice(i-deleteCount,1))
    deleteCount++;
  });   
  console.log(availArr, selectedArr)
}

manipulateIndexes([0,2])

Answer 12

To achieve this, you can utilize the array.splice method along with array.concat.

var defaultArr = ['a', 'b', 'c', 'd'];
var availArr = [];
var selectedArr = [];

function manipulateIndexes(indexArr){
  var deleteCount = 0;
  availArr = defaultArr.map(x=>x);
  indexArr.forEach(function(i){
    selectedArr = selectedArr.concat(availArr.splice(i-deleteCount,1))
    deleteCount++;
  });   
  console.log(availArr, selectedArr)
}

manipulateIndexes([0,2])

Answer 13

Answer №7

If you only use the Array.filter method:

var array = ['a', 'b', 'c', 'd'];
var indexes = [0, 2]
array.filter(function(el, i) { 
    return indexes.indexOf(i) !== -1 
});

// ["a", "c"]

By using array as the collection of your elements like objects or strings and indexes as the array containing the specific indexes you want to keep, you can easily filter out unwanted elements from the array based on their index.

Answer 14

If you only use the Array.filter method:

var array = ['a', 'b', 'c', 'd'];
var indexes = [0, 2]
array.filter(function(el, i) { 
    return indexes.indexOf(i) !== -1 
});

// ["a", "c"]

By using array as the collection of your elements like objects or strings and indexes as the array containing the specific indexes you want to keep, you can easily filter out unwanted elements from the array based on their index.

Answer 15

Answer №8

You can easily retrieve all selected entries by using a single line of code with the Array.map:

const defaultArr = ['x', 'y', 'z', 'w']
const index = [1,3]
const selectedEntries = index.map(i => defaultArr[i]) //=> ['y', 'w']

To get the array of remaining entries, you can use Lodash's difference method:

const availableEntries = _.difference(defaultArr, selectedEntries) //=> ['x', 'z']

Answer 16

You can easily retrieve all selected entries by using a single line of code with the Array.map:

const defaultArr = ['x', 'y', 'z', 'w']
const index = [1,3]
const selectedEntries = index.map(i => defaultArr[i]) //=> ['y', 'w']

To get the array of remaining entries, you can use Lodash's difference method:

const availableEntries = _.difference(defaultArr, selectedEntries) //=> ['x', 'z']

Mapping Arrays in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Error in the HTML DOCTYPE declaration affecting JavaScript files

ReactJS does not trigger a re-render when changes are made to CSS

Using AngularJS to showcase information received from socket.io

Why is it that my jquery code seems to be struggling with calculating the count accurately?

Why won't my jQuery datepicker show up?

Tips for displaying the overlay in a jQuery UI modal dialog

Utilizing JQuery's printThis Plugin in Combination with the Style Attribute

In a scenario where multiple fields need to be incremented, one can accomplish this by incrementing one field every time while also increasing the other field only if it exceeds a

The jQuery code causes IE6 to crash

An unexpected error has occurred: Uncaught promise rejection with the following message: Assertion error detected - The type provided is not a ComponentType and does not contain the 'ɵcmp' property

Creating a test suite with Jasmine for an Angular ui-grid component compiled without using $scope

Is there a tool or software available that can securely encode a text file into an HTML file without the need for loading it using AJAX?

Error: The function $.ajax(...).done(...).fail(...).complete does not exist

When retrieving values from an array using an index, it may result in

Transform the elements in an ArrayList into a single string separated by commas

The transmission of information through Ajax is encountering a problem as the data is not properly

Utilizing Typescript generics in scenarios with arguments that may be either a value or a callback function

Retrieve all default and user-defined fields associated with contacts in the CRM 2011 system

Tips for selecting a specific input field in a ReactJS component with multiple inputs

What kind of data structure is suitable for a MediaStream when passing it as a prop in a Vue component