how should we convert string data into array and display into react table

Question

I have imported CSV data and converted into the following stringData. Now I have to display this stringData in a React table. 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. 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"

yes it is a string string. when i import the csv file i am using filereader. so i am getting this string — Nick
– Nick, Commented Feb 16, 2021 at 11:30

Hannah · Accepted Answer · 2021-02-16 11:35:27Z

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/

Lajos Arpad · Accepted Answer · 2021-02-16 11:41:24Z

    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:

Our starting point is the string you have
We break up the string into lines, \n is the newline character, we use it as a separator that denotes the end of a line and the start of the next
Header is the very first line
Body is all the lines except the header
We split each line into items, using , as the separator

sayalok · Accepted Answer · 2021-02-16 11:50:18Z

You just have to split twice 1st you have to do it by space and then you have to split it by ,

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>

Collectives™ on Stack Overflow

how should we convert string data into array and display into react table

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related