Converting JS arrays into objects from table

Question

First my solution

    function convertTable(table){
  let newArray = []
  for(let i=0; i<table.length-1; i++){
    newArray.push({})
  }
  for(let j=0; j<newArray.length; j++){
     for (const key of table[0]) {
      newArray[j][key] = table[j+1][table[0].indexOf(key)];
      console.log(key)
 }
  }
  return newArray
}

What I'm doing is taking an array that holds other arrays which each represents a table row such as

const tableData = [
  ["header_one", "header_two", "header_three", "header_four"],
  ["blah", "blah", "blah", "blah"],
  ["blah", "blah", "blah", "blah"],
  ["blah", "blah", "blah", "blah"]
]

And making it output

    [
  { header_one : "blah", header_two : "blah", header_three: "blah", header_four : "blah" },
  { header_one : "blah", header_two : "blah", header_three: "blah", header_four : "blah" },
  { header_one : "blah", header_two : "blah", header_three: "blah", header_four : "blah" }
]

I feel like there must be some better ways to do this

Ele · Accepted Answer · 2020-08-27 19:12:49Z

1

You can use the function Array.prototype.reduce to build the desired output.

const tableData = [  ["header_one", "header_two", "header_three", "header_four"],  ["blah", "blah", "blah", "blah"],  ["blah", "blah", "blah", "blah"],  ["blah", "blah", "blah", "blah"]],
      {result} = tableData.reduce((r, arr, i) => {
        if (i) r.result = r.result.concat(r.properties.reduce((a, p, pi) => Object.assign(a, {[p]: arr[pi]}), {}));
        else r.properties = arr;

        return r;
      }, {result: [], properties: []});

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Aug 27, 2020 at 19:12

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

Comments

score 1 · Accepted Answer · 2020-08-27 19:18:52Z

You can use .map() to create the objects, and .reduce() on each one to create each object.

const tableData = [
  ["header_one", "header_two", "header_three", "header_four"],
  ["blah", "blah", "blah", "blah"],
  ["blah", "blah", "blah", "blah"],
  ["blah", "blah", "blah", "blah"]
];

const headers = tableData[0];

const result = tableData.slice(1).map(a =>
  a.reduce((o, v, i) => ({...o, [headers[i]]: v}), {})
);

console.log(result);

It first separates out the headers, and then uses .map() on a slice of the remaining arrays.

In .reduce() it uses spread syntax to return a new object with the accumulation so far plus the current header (key) and value.

Or here's the same solution, but it swaps the .reduce() array to be the headers, with the lookup for the value on the current mapped array.

const tableData = [
  ["header_one", "header_two", "header_three", "header_four"],
  ["blah", "blah", "blah", "blah"],
  ["blah", "blah", "blah", "blah"],
  ["blah", "blah", "blah", "blah"]
];

const headers = tableData[0];

const result = tableData.slice(1).map(a =>
  headers.reduce((o, h, i) => ({...o, [h]: a[i]}), {})
);

console.log(result);

Collectives™ on Stack Overflow

Converting JS arrays into objects from table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related