Javascript ReactJS：使用JSX进行数据转换

我正在尝试在React应用程序中使用JSX转换数据，但我甚至很难找到这样做的步骤

输入：

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

所需输出：

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

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

}

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: {…}}

我这么做的尝试太差了…

循环嵌套数组中的每个数组（第一个除外 包含标头的数组）

创建嵌套循环以迭代数组中的每个项

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);

};

在这个嵌套循环中，创建一个字典来存储头，每个数组中的第一项。利用标题索引提取数组中后续项的值

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);

};

---

您可以使用

reduce

和内部

forEach

方法和返回对象来执行此操作

const csv=[
[‘标题’、‘A’、‘B’]，
[E01'，1，0]，
[E02'，5,0]，
[E03'，10，2]
];
const result=csv.reduce（（r，a，i）=>{
如果（i）{
a、 forEach（（e，j）=>{
如果（j）{
let key=csv[0][j]
如果（！r[key]）r[key]={}
r[key][a[0]]=e；
}
})
}
返回r；
}, {})
console.log（result）

您可以使用嵌套for循环来实现结果：

var-arr=[
[‘标题’、‘A’、‘B’]，
[E01'，1，0]，
[E02'，5,0]，
[E03'，10，2]
];
var obj={}；
对于（var i=1；i控制台日志（obj）我想这可能对你有用。我添加了一些评论。希望它对你有用

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);

const csvData=[
[‘标题’、‘A’、‘B’]，
[E01'，1，0]，
[E02'，5,0]，
[E03'，10，2]
];
//将标题与数据分开
const header=csvData.shift（）；
//去掉第一行，因为我们不打算使用它。
header.shift（）；
//创建输出数据
常量输出={}；
//迭代每个标题值以创建键。Ex{A:{}，B:{}
对于（设i=0；i您需要使用
reduce（）
而不是
map（）
，因为您希望从输入数组而不是对象数组创建单个对象。