What is the best way to divide an array into separate columns in JavaScript?

Question

What is the best way to divide an array into separate columns in JavaScript?

Hey there fellow JavaScript enthusiasts!

I am working with an array that I created from data extracted from a csv file. Here's a snippet of how it looks:

https://i.sstatic.net/tczVz.png

Each index in the array, for example array[0], represents the headers with a total of 87 in this instance. The subsequent arrays within the array represent the rows of data.

My goal is to extract and organize this data into columns.

The code snippet below accomplishes this task but only for the first column:

      var specialCounter = 0;
        for(var j = 1; j<vm.lines.length; j++){
            vm.columns.push(vm.lines[j][0]);

            if(specialCounter >= vm.lines[j][0].length)
                specialCounter = 0;
            else
                specialCounter++;
        }

        vm.columnData.columnData= vm.columns;

        console.log(vm.columnData);

Here's the array output generated by the code above:

https://i.sstatic.net/Khwvc.png

How can I extend this logic to work with all columns in the array?

Perhaps utilizing a structure like

vm.dataPerColumn = [{column1: [...], column2: [...], etc...]

javascript arrays algorithm arraylist

Answer 1

Answer №1

Using the reduce method on the array, each sub-array is checked using the forEach method to see if a key exists. If a key does not exist, it is created on the result object (r) and the current item is pushed to that key:

var arr = [['h1', 1, 2, 3], ['h2', 4 , 5 , 6], ['h3', 7, 8, 9]];

var result = arr.reduce(function(r, a) {
  a.forEach(function(s, i) {
    var key = i === 0 ? 'headers' : 'column' + i;
    
    r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value
    
    r[key].push(s);
  });
  
  return r;
}, {});

console.log(result);

Answer 2

Using the reduce method on the array, each sub-array is checked using the forEach method to see if a key exists. If a key does not exist, it is created on the result object (r) and the current item is pushed to that key:

var arr = [['h1', 1, 2, 3], ['h2', 4 , 5 , 6], ['h3', 7, 8, 9]];

var result = arr.reduce(function(r, a) {
  a.forEach(function(s, i) {
    var key = i === 0 ? 'headers' : 'column' + i;
    
    r[key] || (r[key] = []); // if key not found on result object, add the key with empty array as the value
    
    r[key].push(s);
  });
  
  return r;
}, {});

console.log(result);

Answer 3

Answer №2

After reviewing the description and examining the image, it appears that the headers are located within array[0]

const vm = {};
vm.lines = [["$", "house", "car"],[5, 10, 15],[25,35,45]]; 

const headers = vm.lines[0];
const data = vm.lines.slice(1);

const columns = data.reduce((newColumns, row) => {
    for(let i=0;i<row.length;i++){
        if(newColumns.length-1 < i){ //first column;
            newColumns.push([]);
        }
        newColumns[i].push(row[i]);
    }
    return newColumns;
}, []);

const columnsWithHeaders = headers.map((header, index) => ({[header]:columns[index]}));

console.log(columnsWithHeaders);

You asked for column1, column2, etc., but it may be more logical to pair the header name with the corresponding column, making it easier to reference directly.

What has been done is the separation of headers and data, eliminating the need to worry about the first line,

The next step involves converting rows into columns, allowing for a direct association of each column array with its respective header.

Answer 4

After reviewing the description and examining the image, it appears that the headers are located within array[0]

const vm = {};
vm.lines = [["$", "house", "car"],[5, 10, 15],[25,35,45]]; 

const headers = vm.lines[0];
const data = vm.lines.slice(1);

const columns = data.reduce((newColumns, row) => {
    for(let i=0;i<row.length;i++){
        if(newColumns.length-1 < i){ //first column;
            newColumns.push([]);
        }
        newColumns[i].push(row[i]);
    }
    return newColumns;
}, []);

const columnsWithHeaders = headers.map((header, index) => ({[header]:columns[index]}));

console.log(columnsWithHeaders);

You asked for column1, column2, etc., but it may be more logical to pair the header name with the corresponding column, making it easier to reference directly.

What has been done is the separation of headers and data, eliminating the need to worry about the first line,

The next step involves converting rows into columns, allowing for a direct association of each column array with its respective header.

What is the best way to divide an array into separate columns in JavaScript?

Answer №1

Answer №2

Similar questions

When you hover over HTML tables, they dynamically rearrange or shift positions

Greasemonkey script causing interference with other website scripts

Is there a method to introduce a line break for each piece of data that is shown?

The module 'pouchdb' appears to be missing, functioning correctly on Mac but encountering issues on Windows

Unlocking the Secret: How to Bind a Global Touch Event Handler in Angular 4 to Prevent iOS Safari Page Drag

A guide on ensuring all necessary keys are present in a JSON document using Node.js

What measures can be taken in React to ensure that only authorized users are able to access the admin privileged layout

Personalize the marker design within the Wikitude SDK using JavaScript

Encountered a connection error in the Spring Boot application: net::ERR_CONNECTION_REF

Highlighted option selection in Material UI dropdown using Cypress

The onsubmit event in Javascript activates the parent's onclick event

Mac OS reports an Illegal instruction: 4 error when running NodeJS

Searching for ways to filter out specific tags using regular expressions

How come changes to the DOM are not recognized by subsequent DOM readings?

Looking for a way to efficiently retrieve results by matching multiple string keywords as you go through each line of a file (fs)?

Sometimes, React doesn't cooperate properly in the callback function of a setState operation

What is the best way to insert an iframe using getElementById?

Tips for passing input fields from a React Function component to a function

Contrasting the utilization of Angular $scope dependency with independent usage

My NodeJS MongoDB application is being bombarded by an infinite loop of "Sending request..." messages from the Postman