如何将字符串数据转换为数组并显示为反应表

Question

我已导入CSV数据并转换为以下stringData。现在我必须在React表中显示此stringData。我尝试使用映射函数将标题和映射到<th>，但当我试图将值显示到<tr>时，它正在考虑每一行作为一个值。请让我知道，如果有任何其他方式做到这一点。由于

const stringData = "BRANCH,ITEMNUM,UNITCOST,COSTMETHOD
34,130156,86.25,51
34,220134,75.8425,51
34,190365,53.5325,51
34,200350,18.4,51"

Answer 1

假设您的结果字符串包含用于表示不同行的换行符，则此解决方案应该可以工作:

const stringData = `BRANCH,ITEMNUM,UNITCOST,COSTMETHOD
34,130156,86.25,51
34,220134,75.8425,51
34,190365,53.5325,51
34,200350,18.4,51`;
const rows = stringData.split('n');
let cols = rows.splice(0, 1)[0];
cols = cols.split(',');
const result = rows.map((row) => {
const vals = row.split(',');
return vals.reduce((res, val, idx) => {
const prop = cols[idx];
res[prop] = val;
return res;
}, {});
});
console.log(result);

这是一个工作的JSFiddle: https://jsfiddle.net/hannahska/y4rq13h8/8/

Answer 2

const stringData = `BRANCH,ITEMNUM,UNITCOST,COSTMETHOD
34,130156,86.25,51
34,220134,75.8425,51
34,190365,53.5325,51
34,200350,18.4,51`;

let lines = stringData.split("n");

let header = lines[0].split(",");

let body = lines.filter((item) => item !== header).map(item => item.split(","));
console.log({header, body});

解释:

1. 我们的起始点是字符串
2. 我们把字符串分成几行，n是换行符，我们用它作为分隔符，表示一行的结束和下一个
的开始
3. 头是第一行
4. 正文是除标题
以外的所有行。
5. 我们使用,作为分隔符将每行拆分为项

Answer 3

你只需要分割两次首先你要分割space然后再分割,

然后你可以创建你的表

const stringData = "BRANCH,ITEMNUM,UNITCOST,COSTMETHOD 34,130156,86.25,51 34,220134,75.8425,51 34,190365,53.5325,51 34,200350,18.4,51"
var res = stringData.split(" ");
var test = document.getElementById("test");
res.map((items) => {
let row = items.split(",");
var trBlock = document.createElement("tr")
row.map((item) => {
trBlock.innerHTML += `
<td>${item}</td>
`
test.appendChild(trBlock)
})
})

table, th, td {
border: 1px solid black;
}

<table id="test"></table>