![](/img/trans.png)
[英]How to arrange nested array of object data for react table component display
[英]how should we convert string data into array and display into react table
我已导入 CSV 数据并转换为以下stringData
。 现在我必须在 React 表中显示这个stringData
。 我尝试使用 map function 将标题和 map 分隔到<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"
假设您的结果字符串包含用于指示不同行的换行符,则此解决方案应该有效:
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/
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});
解释:
\n
是换行符,我们用它作为分隔符,表示一行的结束和下一行的开始,
作为分隔符将每一行分成项目您只需要拆分两次,第一次您必须按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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.