我們應該如何將字符串數據轉換為數組並顯示到反應表中

Question

我已導入 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"

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. Header 是第一行
4. 主體是除 header 之外的所有線條
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>