How to fetch data from excel sheet in react js
Fetch Data from Excel File in React JS | React XLSX
Timecodes:
welcome to Webster address in this video
we will fetch data from an Excel file or
Excel file any react.js application we
will install required dependencies
import the dependencies read the Excel
file parse the data and save it in a
state then we will display the data from
this state in the component this is our
simple react.js application created with
create react app I have placed an Excel
file in the project in SRC folder
number name page state country
interests the task requires Excel SX
library for parsing the Excel files
install the dependencies using npm or
yarn
from your project folder
install this dependency with npm install
xlsx
at npm it's called sheet.js after
dependency is installed import project
dependencies
import use statehook from react
import everything as Excel as X from
Excel SX import all the exported members
from the xlsx library and make them
available as an object Excel SX
Define a state called data and if
function set data to update the state
initialize this state with an initial
value of an empty array
create an input element of type file
that allows user to choose an Excel file
from local file system this file field
will trigger handle file upload function
to process the file when a new file is
selected
create a function to read and pass the
Excel file
handle file upload takes an event object
e as its argument this event object is
automatically passed by the browser when
the on change event is triggered on the
file input element
create a new instance of the file reader
class it provides methods to read the
content of provided file
here the reader's binary string method
is being called on the reader object to
start reading the content of the
uploaded file the files property of the
event object e dot Target holds the list
of the files and the first file is
passed to the method once the file's
content is read the onload even is
triggered and the Callback function is
executed assign an event listener to the
onload property of the reader object
this event listener is a callback
function that is executed when the file
reader has successfully read the file's
content
pause the event object e to the onload
Callback function that contains the
result property
it result property holds the contents of
the file as a binary string this content
is assigned to the data variable here
the read function from the Excel SX
library is being used to pass the binary
string data and create a workbook object
representing the Excel file the first
Sheet's name is being extracted from the
workbook object by accessing the sheet
names array if you need to fetch data
from a different sheet in the Excel file
you can change the number here
the first sheets actual data is being
obtained from the workbook object by
using the extracted sheet name as the
key
straight to Json function is used to
convert the first sheets data into a
Json object this Json object is an array
of raw objects with each object
representing a raw in the sheet
finally call this set data function to
update the state variable data with the
first Json data
now once state will be updated we'll
have the sheets data here in the data
variable now we have the data instead
let's display it
this is a check that checks if data is
not empty if we have the data will
display table
this is table head this is table body
table head section will display set of
table header cells generated based on
the property names of the first object
in the data array creating a table
header that corresponds to the column
names of the data notice we only used
Keys here and not the values object dot
keys from data
object dot Keys is a built-in JavaScript
function that returns an array of the
given objects property names that is
being called here with the first object
in the data array as its argument so it
returns an array of property names for
that object
the map function is being called on the
array of property names it will iterate
over each atom in the array and applies
a callback function to transform the
array items here the Callback function
takes a single argument key which
represents a property name from the data
object
inside the Callback function a new table
header cell that is th is being created
for each property name for each key the
key attribute is being assigned to the
th element to uniquely identify it
within the react component which is a
requirement for the elements generated
from an array in react
here we get the values from data array
from each row we used object dot values
where raw represents a record in data
the map function is iterating over each
item in the array each object here
represents a raw of data a callback
function is applied with two arguments
raw and index raw represents the current
object a row of data an index represents
the current raws index in the data array
inside the call log function a new table
raw is being created for each object in
the data array the key attribute is
assigned to the TR element to uniquely
identified within the Jack compound
which is requirement
within the table raw the object dot
values function is called with the
neural object as the argument which
returns an array of the object's
property values the map function is then
called on this array to iterate over
each value and apply a callback function
to transform the array items a callback
function takes two arguments value that
represents the current cell content and
index representing the current cells
index in the row a new table data cell
is created for each value in the raw the
key attribute is assigned to the TD
element to uniquely identify it within
the react component the value is used as
the content of the TD element so it is
displayed as this cell content now when
we will upload an Excel file the data
will be displayed in a table form
save choose file
and here is the data
and this is how we can display data from
an Excel file in react.js I have also
displayed data using CSV file and Json
file I will link those tutorials in the
description
okay I hope it helped like share
subscribe and I will see you in the next
video
Related queries:
how to get data from excel sheet in react js
how to retrieve data from excel sheet in node js
how to read data from excel sheet in node js
how to fetch data from excel sheet in java
how to read data from excel file in react js
