Creating an array in React with objects created from two lists

Question

I'm trying to take a json payload and plot it in a react-table. The required format for their table is (very specific and) the following: (this is the target format I'm trying to create)

  const rTableObj = [
    {'Col1': row1_col1, 'Col2': row1_col2, 'Col3': row1_col3},
    {'Col1': row2_col1, 'Col2': row2_col2, 'Col3': row2_col3},
    ...
  ]

The raw payload object, after the fetch(url) and response.json comes out as:

  rawPayload:
    Names: {0: "Rebecca", 1: "Sally", 2: "Sally", 3: "Charlie", ...}
    Nums: {0: 11, 1: 16, 2: 8, 3: 12, ...}
    Range: {0: 0, 1: 1, 2: 2, 3: 3, ...}

I can extract the column names, such that I'll have (in this example) colNames = ['Names', 'Nums', 'Range'] and I can extract the values to their own object as

  vals: Array(3)
    0: {0: "Rebecca", 1: "Sally", 2: "Sally", 3: "Charlie", ...}
    1: {0: 11, 1: 16, 2: 8, 3: 12, ...}
    2: {0: 0, 1: 1, 2: 2, 3: 3, ...}

But everything I've tried (.map(...), [].concat(_.merge(...), etc.) doesn't get me to the target. I want to be able to send any payload to the mapper such that the properly formatted object is returned. For this example, that would look like this:

  const rTableObj = [
    {'Names': "Rebecca", 'Nums': 11, 'Range': 0},
    {'Names': "Sally", 'Nums': 16, 'Range': 1},
    ...
  ]

Hyetigran · Accepted Answer · 2020-10-29 03:05:32Z

2

Try this: Edited: so it works dynamically with different column names

rawPayload = {
  Names: { 0: "Rebecca", 1: "Sally", 2: "Sally", 3: "Charlie" },
  Nums: { 0: 11, 1: 16, 2: 8, 3: 12 },
  Range: { 0: 0, 1: 1, 2: 2, 3: 3 },
  Age: { 0: 20, 1: 21, 2: 22, 3: 23 }
};

const tableMap = (rawPayload) => {
  let colNames = Object.keys(rawPayload);
  let length = Object.values(rawPayload[colNames[0]]).length

  let rTableObj = [];
  for (let i = 0; i < length; i++) {
    var entry = {};
    for (let j = 0; j < colNames.length; j++) {
      var name = colNames[j];
      entry[name] = rawPayload[name][i];
    }
    rTableObj.push(entry);
  }
  return rTableObj;
};

console.log(tableMap(rawPayload));

edited Oct 29, 2020 at 3:05

answered Oct 26, 2020 at 21:44

Hyetigran

1,2253 gold badges15 silver badges32 bronze badges

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

3 Comments

WaveRider Over a year ago

thanks for the answer - I'm trying to not hardcode the column names, and extract them, then use them. Is there any way to extract them from a colNames array in your function? Like colNames = ['Names', 'Nums', 'Range'] ?

Hyetigran Over a year ago

@WaveRider edited to handle column names dynamically

WaveRider Over a year ago

Looks good! One change needed: there's one dependency remaining on a column name in your line let length = Object.values(rawPayload["Names"]).length;, which can/should be changed to: const length = Object.values(rawPayload[colNames[0]]).length; ...and then you win the prize ;) ...Thank you!

Collectives™ on Stack Overflow

Creating an array in React with objects created from two lists

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related