Javascript: convert CSV to separate arrays for keys and values

Question

Converting CSV data to Javascript arrays was already discussed here, but this is another case.

Assuming we have CSV-formated data structured like this:

one,two
three,four
five,six

We can use split() function or libraries like jquery-csv or Papa Parse to convert it into a JS array structured like:

[['one', 'two'], ['three', 'four'], ['five', 'six']]

But how to convert it into arrays containing data of first and second 'column' respectively? Like:

[['one', 'three', 'five'], ['two', 'four', 'six']]

We can, of course, iterate through obtained key-value pair arrays and push keys and values into separate arrays, but is there a way to get it structured like this directly from CSV?

Parsing CSV data into an array can be resource hungry enough, so it is good to skip unnecessary actions.

The term you're looking for is "pivot" (or "transpose"). CSVs are inherently row-oriented, so the first output makes sense, but I'm sure somewhere you can find an example of pivoting a 2d JS array. No sense reinventing the wheel, here. Also, because of how linear data works, you can't even do what you're asking for efficiently without the temporary structure. — David Ehrmann
– David Ehrmann, Commented May 5, 2015 at 9:44

Volkan Ulukut · Accepted Answer · 2015-05-05 09:49:02Z

1

You can use below function to transpose your array:

transpose = function(a) {

  // Calculate the width and height of the Array
  var w = a.length ? a.length : 0,
    h = a[0] instanceof Array ? a[0].length : 0;

  // In case it is a zero matrix, no transpose routine needed.
  if(h === 0 || w === 0) { return []; }

  /**
   * @var {Number} i Counter
   * @var {Number} j Counter
   * @var {Array} t Transposed data is stored in this array.
   */
  var i, j, t = [];

  // Loop through every item in the outer array (height)
  for(i=0; i<h; i++) {

    // Insert a new row (array)
    t[i] = [];

    // Loop through every item per item in outer array (width)
    for(j=0; j<w; j++) {

      // Save transposed data.
      t[i][j] = a[j][i];
    }
  }

  return t;
};
transpose([['one', 'two'], ['three', 'four'], ['five', 'six']]);

jsfiddle

source: http://www.shamasis.net/2010/02/transpose-an-array-in-javascript-and-jquery

edited May 5, 2015 at 9:49

answered May 5, 2015 at 9:46

Volkan Ulukut

4,2281 gold badge24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pedro Lobito Over a year ago

And if the file has 1000 lines ?

David Ehrmann Over a year ago

@PedroLobito: It only changes the runtime and memory requirements by a constant factor. This usually isn't a problem.

David Ehrmann Over a year ago

You could also use a custom get function that does the mapping dynamically, but that makes accesses kinda slow, and it's more of a "cute" approach than a pragmatic one.

cincplug Over a year ago

That is indeed my point. This code is fine if CSV is small, so it doesn't matter if we first convert it to key-value array of arrays and then use code like this to pivot it. I agree that key-value formatting is in most cases more logical, but if for some reason we need separate arrays for keys and values and the CSV is rather big, then it would be better to have a way do one processing and obtain separate arrays directly from CSV.

cincplug Over a year ago

Anyway, this seems to be as good as it gets. Thanks everyone.

Collectives™ on Stack Overflow

Javascript: convert CSV to separate arrays for keys and values

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related