Generate a smaller set of information by choosing specific columns within a two-dimensional JavaScript array

Question

Generate a smaller set of information by choosing specific columns within a two-dimensional JavaScript array

Apologies for the simplicity of my question and my limited knowledge in javascript. I am completely new to this language and need some guidance. I have an array of data and I want to extract a subset based on selected columns. Here is a snippet of the initial data:

0: {ID: 3607, Name: 'Alamo', Funds: 52933955, Revenues: 9160109, BAT: 5, …}

1: {ID: 3539, Name: 'Alvin', Funds: 6128147, Revenues: 964083, BAT: 0, …}

2: {ID: 3540, Name: 'Amarillo', Funds: 12450969, Revenues: 1716038, BAT: 0, …}

I aim to create a new array from columns 0, 1, 2, and 4 (ID, Name, Funds, and BAT). In the provided code block, toolData represents the original dataset ('toolData.json') while tableData indicates the new array being formed. The selections variable holds the numbers of the desired columns.

var getData = () => axios.get('toolData.json')
  .then(res => res.data)
  .then(data => {
    
    var toolData = data;
    console.log(toolData);
    
    var tableData = [];
    var selections = [0,1,2,4];

    for (i=0; i < toolData.length; i++)
    {
      tableData[i] = toolData[i];
      for (j=0; j<selections.length; j++)
      { 
        k = selections[j],
        tableData[i][j] = toolData[i][k]
      }
    }
    console.log(tableData);

This specific code excerpt seems to be causing issues as it appears to result in an infinite loop. By removing tableData[i] = toolData[i];, the loop issue vanishes but the code still doesn't function correctly. While console.log(toolData); outputs the complete dataset as expected, console.log(tableData); displays an error message:

javascript.js:42 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting '0')
    at javascript.js:42

My ultimate goal is to allow users to select the columns they wish to include in the new array. However, before implementing that feature, I must address this current challenge.

javascript arrays

Answer 1

Answer №1

It appears that each index in the array is an object based on your explanation. For example, arr[0][0]==undefined, but arr[0]['ID']==3607

function extractSubset(arr,dataToSelect){
  //arr represents the fetched array, dataToSelect contains the keys (e.g., ID, Name) that you want to extract from the array
  return arr.map(obj=>{
    var selectedData={} //object containing the desired keys for each element in the array
    dataToSelect.forEach(key=>selectedData[key]=obj[key]) //populating selectedData with wanted keys
    return selectedData
  })
}

//example of usage
var fetchData = () => axios.get('toolData.json')
  .then(res => res.data)
  .then(data => { 
    var desiredKeys=["ID","Name","Funds","BAT"]
    console.log(extractSubset(data,desiredKeys))
    //add the rest of your code here

LIVE DEMO

var dataArray=[{ID: 3607, Name: 'Alamo', Funds: 52933955, Revenues: 9160109, BAT: 5},   {ID: 3539, Name: 'Alvin', Funds: 6128147, Revenues: 964083, BAT: 0},   {ID: 3540, Name: 'Amarillo', Funds: 12450969, Revenues: 1716038, BAT: 0}]
function extractSubset(arr,dataToSelect){
  //arr is the fetched array, dataToSelect is an array of the keys(like ID,Name...) that you want from the array
  return arr.map(obj=>{
    var toReturn={} //object that would give each desired key for each part in arr
    dataToSelect.forEach(key=>toReturn[key]=obj[key]) //placing wanted keys in toReturn
    return toReturn
  })

console.log(extractSubset(dataArray,["ID","Name","Funds","BAT"]))

Answer 2

It appears that each index in the array is an object based on your explanation. For example, arr[0][0]==undefined, but arr[0]['ID']==3607

function extractSubset(arr,dataToSelect){
  //arr represents the fetched array, dataToSelect contains the keys (e.g., ID, Name) that you want to extract from the array
  return arr.map(obj=>{
    var selectedData={} //object containing the desired keys for each element in the array
    dataToSelect.forEach(key=>selectedData[key]=obj[key]) //populating selectedData with wanted keys
    return selectedData
  })
}

//example of usage
var fetchData = () => axios.get('toolData.json')
  .then(res => res.data)
  .then(data => { 
    var desiredKeys=["ID","Name","Funds","BAT"]
    console.log(extractSubset(data,desiredKeys))
    //add the rest of your code here

LIVE DEMO

var dataArray=[{ID: 3607, Name: 'Alamo', Funds: 52933955, Revenues: 9160109, BAT: 5},   {ID: 3539, Name: 'Alvin', Funds: 6128147, Revenues: 964083, BAT: 0},   {ID: 3540, Name: 'Amarillo', Funds: 12450969, Revenues: 1716038, BAT: 0}]
function extractSubset(arr,dataToSelect){
  //arr is the fetched array, dataToSelect is an array of the keys(like ID,Name...) that you want from the array
  return arr.map(obj=>{
    var toReturn={} //object that would give each desired key for each part in arr
    dataToSelect.forEach(key=>toReturn[key]=obj[key]) //placing wanted keys in toReturn
    return toReturn
  })

console.log(extractSubset(dataArray,["ID","Name","Funds","BAT"]))

Answer 3

Answer №2

The information is stored in a JSON format, organized by names rather than numerical indexes.

It is advised to utilize the map function that comes built-in for this purpose.

const tableData = toolData.map(row => ({
    ID: row.ID,
    Name: row.Name,
    Funds: row.Funds,
    BAT: row.BAT
}));

If you prefer the new toolData array to consist of arrays instead of objects, you can achieve this with:

const tableData = toolData.map(row => [
    row.ID,
    row.Name,
    row.Funds,
    row.BAT
]);

Answer 4

The information is stored in a JSON format, organized by names rather than numerical indexes.

It is advised to utilize the map function that comes built-in for this purpose.

const tableData = toolData.map(row => ({
    ID: row.ID,
    Name: row.Name,
    Funds: row.Funds,
    BAT: row.BAT
}));

If you prefer the new toolData array to consist of arrays instead of objects, you can achieve this with:

const tableData = toolData.map(row => [
    row.ID,
    row.Name,
    row.Funds,
    row.BAT
]);

Generate a smaller set of information by choosing specific columns within a two-dimensional JavaScript array

Answer №1

Answer №2

Similar questions

Encountered an issue while compiling code using the Istanbul plugin

PHP: Converting a string with array expression into a usable array

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

Easy way to eliminate empty elements following a class using jQuery

AngularJS - Introducing blurred delay

Finding documents by name in Photoshop

Increased/Decreased impact

various types of information in a grid

Update the sum upon deleting a feature in an HTML and JavaScript form

Error: Python data loading can only convert arrays with a length of 1 to scalars in a dataset

Using a PHP foreach loop to iterate through an array containing both strings and

Using Jquery to iterate through a PHP array, calling an API to fetch data, and then storing the results

Is it possible to populate the bit fields of a struct using an unsigned character array in C++?

Having trouble scrolling with Selenium WebDriver and JavaScript Executor

Fetching dynamic information via AJAX for a jQuery tooltip

Node.js Export Module Error - importance of separating concerns

Accessing website login - <div> and validating user entry

How to use jQuery to locate and update the final parameter of a URL

Can a Set (or Map) be held in a "frozen" state?

"Textarea auto-resizing feature causes an excessive number of unnecessary lines to be added