ReactJS：使用JSX进行数据转换

Question

I'm trying to transform data with JSX in a React app, but am struggling to even figure the steps for doing so.

Input:

const csvData =[
  ['title', 'A', 'B'] ,
  ['E01', 1 , 0] ,
  ['E02', 5 , 0] ,
  ['E03', 10, 2]
];

Desired Output:

const jsonData = 
{
    "A": 
      {
        "E01": 1,
        "E02": 5,
        "E03": 10
      },

    "B": 
      {
        "E01": 0,
        "E02": 0,
        "E03": 2
      }

}

My poor attempt at doing so...

1. Loop through each array in nested array (except for the first array which contains the header)

2. Create nested loop to iterate through each item in array.

3. Within this nested loop, create a dictionary to store header, first item in each array. Utilize index of header to extract value of subsequent items in array.

    export function transformData(data) { let dict = []; // array of header labels const arr = data[0]; // Looping through each row for (var i=1; i<data.length; i++) { // Create a dictionary by iterating through each header label, then extracting title and its value arr.map((f) => dict.push( {key: f, value: {key: data[i][0], value: data[i][f]} })) } console.log(dict); }; 

Result printed by console:

0:
key:"title"
value:{key: "E01", value: undefined}

1:
key:"A"
value:{key: "E01", value: undefined}

2:
key:"B"
value:{key: "E01", value: undefined}

3:{key: "title", value: {…}} // header labels are repeated..
4:{key: "A", value: {…}}
5:{key: "B", value: {…}}
6:{key: "title", value: {…}}
7:{key: "A", value: {…}}
8:{key: "B", value: {…}}

Answer 1

You can do this with reduce and inside forEach method and return object.

 const csv = [ ['title', 'A', 'B'], ['E01', 1, 0], ['E02', 5, 0], ['E03', 10, 2] ]; const result = csv.reduce((r, a, i) => { if (i) { a.forEach((e, j) => { if (j) { let key = csv[0][j] if (!r[key]) r[key] = {} r[key][a[0]] = e; } }) } return r; }, {}) console.log(result) 

You could also first take columns from first array with slice and then use reduce to build object.

 const csv = [ ['title', 'A', 'B'], ['E01', 1, 0], ['E02', 5, 0], ['E03', 10, 2] ]; const keys = csv[0].slice(1) const result = csv.slice(1).reduce((r, a) => { a.slice(1).forEach((e, i) => { let key = keys[i] if (!r[key]) r[key] = {} r[key][a[0]] = e }); return r; }, {}) console.log(result) 

Answer 2

You can use nested for loops to achieve the result :

 var arr = [ ['title', 'A', 'B'] , ['E01', 1 , 0] , ['E02', 5 , 0] , ['E03', 10, 2] ]; var obj = {}; for(var i = 1; i < arr[0].length; i++){ obj[arr[0][i]] = {}; for(var j = 1; j < arr.length; j++){ obj[arr[0][i]][arr[j][0]] = arr[j][i]; } } console.log(obj); 

Answer 3

I think this may work to you. I've added comments. Hope it works to you!

const csvData =[
  ['title', 'A', 'B'] ,
  ['E01', 1 , 0] ,
  ['E02', 5 , 0] ,
  ['E03', 10, 2]
];

// Separates the header from the data
const header = csvData.shift();

// Takes out the first row as we are not going to use it.
header.shift();

// Create the output data
const output = {};

// Iterate each header value to create the keys. Ex { A: {}, B: {}}
for(let i=0; i<header.length; i++) {
    const key = header[i];

  // Creates the Key Property
  output[key] = {};

  // Assign the Values on the Key based on the rows with data
  for (let j=0; j< csvData.length; j++) {
    const row = [ ...csvData[j] ];

    // As the first column is always the key property, we take it
    const prop = row.shift();

    // Then we take the value according the header index (i)
    const value = row[i];
    output[key][prop] = value;
  }
}

console.log(output);

I also create a fiddle .