JSON data to React Table - json

Question

I am reading a Excel File as json objects.
Here is my Excel File.
I am reading excel data as json objects in the Inspect Tools as below.
I need to pass these json objects into a react table which can be selcted as row by row.
Is there any method to do this?

Answer 1

Since the excel data is shown in the inspect tools, we can set the data into the state and directly call them in the table.
handleFiles = event => {
var fileType = "xlsx";
if (event.target.files && event.target.files[0]) {
var extension = event.target.files[0].name
.split(".")
.pop()
.toLowerCase(), //file extension from input file
isSuccess = fileType.indexOf(extension) > -1; //is extension in acceptable types
if (isSuccess) {
//yes
var reader = new FileReader();
reader.onload = event => {
alert("Valid File extension");
const bstr = event.target.result;
const wb = XLSX.read(bstr, { type: "binary" });
console.log("data>>>", wb);
/* Get first worksheet */
const wsname = wb.SheetNames[0];
const ws = wb.Sheets[wsname];
/* Convert array of arrays */
const data = XLSX.utils.sheet_to_json(ws);
//set data into
this.setState({
data: XLSX.utils.sheet_to_json(ws)
});
// ws;
// { header: 1 }
// );
/* Update state */
console.log("Data>>>", data);
};
reader.readAsBinaryString(event.target.files[0]);
} else {
//no
alert("Invalid File Type ");
}
}
};
In the table it should be updated as below.
<CheckboxTable
.............
data={this.state.data}
........
/>

Answer 2

To iterate over object you can do this,
const data = Object.keys(obj).forEach(function(key,index) {
// key: the name of the object key
// index: the ordinal position of the key within the object
return (<tr><td>{obj[key]}</td>... //create td's as per your data</tr>)
});
In your component.
<Table>
{data}
</Table>