[英]how should we convert string data into array and display into react table
I have imported CSV data and converted into the following stringData
.我已导入 CSV 数据并转换为以下
stringData
。 Now I have to display this stringData
in a React table.现在我必须在 React 表中显示这个
stringData
。 I have tried using map function to separate the headers and map to <th>
but when I tried to display the values into <tr>
it is considering each row as one value.我尝试使用 map function 将标题和 map 分隔到
<th>
但是当我尝试将值显示到<tr>
时,它正在将每一行视为一个值。 Please let me know if there is any other way of doing this.请让我知道是否有其他方法可以做到这一点。 Thanks
谢谢
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"
Assuming your string of results includes line breaks to indicate different rows, this solution should work:假设您的结果字符串包含用于指示不同行的换行符,则此解决方案应该有效:
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);
Here's a working JSFiddle: https://jsfiddle.net/hannahska/y4rq13h8/8/这是一个有效的 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});
Explanation:解释:
\n
is the newline character, we use it as a separator that denotes the end of a line and the start of the next\n
是换行符,我们用它作为分隔符,表示一行的结束和下一行的开始,
as the separator,
作为分隔符将每一行分成项目You just have to split twice 1st you have to do it by space
and then you have to split it by ,
您只需要拆分两次,第一次您必须按
space
进行,然后您必须将其拆分,
Then you can build your table然后你可以建立你的桌子
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.