What is the best method for extracting various columns from a two-dimensional array?

Question

What is the best method for extracting various columns from a two-dimensional array?

Can you provide me with some assistance in JavaScript on how to extract multiple columns from a two-dimensional array similar to the example below?

Array = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
];

I have come across methods like forEach or map that allow extracting one column at a time. Is it possible to nest these methods to extract multiple specific columns based on their index?

For instance, if I want columns 1, 2, and 4 as output.

Output = [
  [1, 2, 4],
  [5, 6, 8],
  [9, 10, 12],
];

UPDATE:

Another challenge I am facing is removing any row where Array[i][1] equals 0 or is empty.

If we introduce additional elements into the array...

Array = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [13, 0, 15, 16],
  [17, , 19, 20],
  [21, 22, 23, 24],
];

The desired output should be...

Output = [
  [1, 2, 4],
  [5, 6, 8],
  [9, 10, 12],
  [21, 22, 24],
];

javascript arrays multidimensional-array

Answer 1

Answer №1

To obtain the values at each column for each row in array arr, you can use the .map() method to map each row to a new array. Inside this mapping process, you can utilize another .map() on an array of columns or indexes that you wish to extract the values from. This nested map operation will retrieve and map each index to its associated value from the row.

Here is an example showcasing this approach:

const arr = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
];

const cols = [1, 2, 4];
const res = arr.map(r => cols.map(i => r[i-1]));
console.log(res);

The inner mapping function loops through the indexes specified in the cols array and retrieves the corresponding values from the current row. For instance, if we consider the second array in arr:

[5, 6, 7, 8]

Executing cols.map(...) will iterate over each element in [1, 2, 4]. Each element is transformed into a new value as follows:

i = 1
r = [5, 6, 7, 8]
new value: r[1-1] = 5

Subsequently, the next element in cols is processed:

i = 2
r = [5, 6, 7, 8]
new value: r[2-1] = 6

Lastly, the final element in cols is examined:

i = 4
r = [5, 6, 7, 8]
new value: r[4-1] = 8

Thus, the mapping function generates a new array containing the values located at the specified indexes in the current row ([5, 6, 8]). This process repeats for each inner array or row, resulting in the final output.

UPDATE Following your recent modification, you can apply the same concept described above to filter your arrays based on specific columns of interest. After extracting the desired columns, you can utilize .filter() to retain only the rows with a truthy value in the second column. By keeping arrays with truthy second column values, those with non-truthy values (falsy values) such as 0 or undefined are omitted from the final array.

Check out the following example:

const arr = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
  [13,0,15,16],
  [17, ,19,20],
  [21,22,23,24],
]

const cols = [1, 2, 4];
const col = 2;
const res = arr.filter(r => r[col-1]).map(r => cols.map(i => r[i-1]));
console.log(res);

If there are multiple columns you want to exclude, you can employ .every() to validate that each column contains a truthy value. If every column meets this condition, .every() returns true, maintaining the column; otherwise, it returns false, eliminating the column:

const arr = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
  [13,0,15,16],
  [ ,17,19,20],
  [21,22,23,24],
]

const cols = [1, 2, 4];
const col = [1, 2];
const res = arr.filter(r => col.every(c => r[c-1])).map(r => cols.map(i => r[i-1]));
console.log(res);

Answer 2

To obtain the values at each column for each row in array arr, you can use the .map() method to map each row to a new array. Inside this mapping process, you can utilize another .map() on an array of columns or indexes that you wish to extract the values from. This nested map operation will retrieve and map each index to its associated value from the row.

Here is an example showcasing this approach:

const arr = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
];

const cols = [1, 2, 4];
const res = arr.map(r => cols.map(i => r[i-1]));
console.log(res);

The inner mapping function loops through the indexes specified in the cols array and retrieves the corresponding values from the current row. For instance, if we consider the second array in arr:

[5, 6, 7, 8]

Executing cols.map(...) will iterate over each element in [1, 2, 4]. Each element is transformed into a new value as follows:

i = 1
r = [5, 6, 7, 8]
new value: r[1-1] = 5

Subsequently, the next element in cols is processed:

i = 2
r = [5, 6, 7, 8]
new value: r[2-1] = 6

Lastly, the final element in cols is examined:

i = 4
r = [5, 6, 7, 8]
new value: r[4-1] = 8

Thus, the mapping function generates a new array containing the values located at the specified indexes in the current row ([5, 6, 8]). This process repeats for each inner array or row, resulting in the final output.

UPDATE Following your recent modification, you can apply the same concept described above to filter your arrays based on specific columns of interest. After extracting the desired columns, you can utilize .filter() to retain only the rows with a truthy value in the second column. By keeping arrays with truthy second column values, those with non-truthy values (falsy values) such as 0 or undefined are omitted from the final array.

Check out the following example:

const arr = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
  [13,0,15,16],
  [17, ,19,20],
  [21,22,23,24],
]

const cols = [1, 2, 4];
const col = 2;
const res = arr.filter(r => r[col-1]).map(r => cols.map(i => r[i-1]));
console.log(res);

If there are multiple columns you want to exclude, you can employ .every() to validate that each column contains a truthy value. If every column meets this condition, .every() returns true, maintaining the column; otherwise, it returns false, eliminating the column:

const arr = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
  [13,0,15,16],
  [ ,17,19,20],
  [21,22,23,24],
]

const cols = [1, 2, 4];
const col = [1, 2];
const res = arr.filter(r => col.every(c => r[c-1])).map(r => cols.map(i => r[i-1]));
console.log(res);

Answer 3

Answer №2

One approach to tackle this is by utilizing the index parameter within the filter method.

Array.filter(currElem, index, array)

Given that arrays are 0-indexed, I have constructed an array with the desired indices [0, 1, 3]. To implement this solution, both the data array and index array need to be passed into the function.

var array = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
];

var arrIndex = [0, 1, 3];

function extractData(arr, indexArr) {

  return arr.map(obj => {  
      return obj.filter((ob, index) => {
          if(indexArr.includes(index)) {return ob}
      })
  })
}

console.log(extractData(array, arrIndex));

Answer 4

One approach to tackle this is by utilizing the index parameter within the filter method.

Array.filter(currElem, index, array)

Given that arrays are 0-indexed, I have constructed an array with the desired indices [0, 1, 3]. To implement this solution, both the data array and index array need to be passed into the function.

var array = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9,10,11,12],
];

var arrIndex = [0, 1, 3];

function extractData(arr, indexArr) {

  return arr.map(obj => {  
      return obj.filter((ob, index) => {
          if(indexArr.includes(index)) {return ob}
      })
  })
}

console.log(extractData(array, arrIndex));

What is the best method for extracting various columns from a two-dimensional array?

Answer №1

Answer №2

Similar questions

Obtaining a value from a protractor promise within a function and returning it

Having difficulty attaching data in Angular 2

What is the best way to access the data stored within a Promise object in a React application?

Visualizing Data with d3.js Force Chart: Integrating Images with Nodes for Dynamic Animation

Having trouble with Angular UI Select functionality?

Issue: Unable to update reference: The primary argument includes an invalid key

Tips for altering the visibility of a different class on hover using jss

Discover the specific item within an array of objects

What is the best method to send a HTTP request (specifically for scraping) to an Angular2 website?

JavaScript: A guide to finding CSS properties within a string

The width values in the array are constantly shifting upon refreshing

Loading New Page When Iframe is Loaded

Steps to initiate my selenium-standalone server: Execute the command "selenium-standalone start"

Issue with Vue js variable not functioning properly when the page is in operation

Unraveling the mysteries of JQuery AJAX POST and Serialization techniques!

Is there a way to dynamically refresh the Bing web API search results on a React.js application after entering a search query in the search bar (in the SER

In VueJS 3, the data within the app.component instance will lack reactivity if it is declared within the data() or setup() functions

Expand the HTML Template and Resize Children to Fit the Window

Tips for interpreting JSONP objects

What is the optimal method for storing a binary tree on a server?