How to convert excel file into JSON object by using JavaScript

This video tells how to convert an excel file into a JSON object by using JavaScript. How to convert Excel File (xlsx, xls) to JSON with Javascript using XLSX (inbuilt functionality of sheetJS) library.
find source code here github.com/jay...
find out more information on my blog here levelup.gitcon...
Initially, when I started working on this requirement, people suggested using any one of the backend libraries to read and convert the excel data into JSON objects. But it is difficult to send requests to the server every time. On the other hand, it was really easy to convert the excel file on the client into a JSON object by using pure JavaScript.
There is JavaScript plugin XSLX that can be used to read excel files as binary strings and to convert it into a JSON object.
Plugins Required: xlsx.full.min.js
Installation
Include the CDN link in the head tag of an HTML file like this:
Now, in the HTML body tag, we need to write an input tag with the type as a file and need to restrict the user to select only files with the extension of .xls or .xlsx. Paste the below code into your HTML body tag.
Now we need to add event listeners for both input and button elements for handling change in input and button click events.
In JavaScript we can add the event listeners to elements like this:
We can read the data in the excel file by using file reader as a binary string in JavaScript. Then we use XLSX which has a builtin facility of SheetJS to convert our binary string into a JSON object.
Now select the excel file and click on the convert button to display the JSON object in the browser. After that, we can use the JSON object for any manipulations and integrate the data into different UI layouts.

[@richjg16]

After weeks of finding a simple solution, you gave it to me in 10 minutes. Thank you!

[@CodePro-Jayanth]

Thank you

[@codingworld1082]

Great to see your video. Teaching not only the conversion but also the way of handling prototypes in console. Waiting for upcoming videos 🌸

[@CodePro-Jayanth]

Will upload soon

[@monabbirhasanrongtuliit]

wow Thanks; for this awesome and helpful video,

[@tylersymons5776]

You have no idea how much this video saved my day xD

[@CodePro-Jayanth]

Please subscribe to my channel

[@nithinsamuel9995]

Thank you for this video :) works great

[@Racine14]

Hello Sir, have you a tutorial about xlsx cdn ?

[@earlgroenewald9598]

This video was very helpful. Thanks a lot

[@CodePro-Jayanth]

If you like the video 📹, please subscribe to my channel 😊

[@glxmind2835]

dude, its really cool information, thanks!!

[@boddulasrikanth6047]

great bro....do more useful videos

[@marie-elizeventer7080]

Thank you very much for taking the time to make this video! The tutorial is very clear.

[@igorstashok6294]

Thank you, bro!!! the best video on this topic

[@CodePro-Jayanth]

Please subscribe to my channel

[@david2358]

Thank you!! It worked perfectly for me!! 👍👍

[@CodePro-Jayanth]

Please subscribe to my channel

[@david2358]

@Code Pro just subscribed 👍

[@BabaAndBaby11]

is it possible to call an api by using the json Object created here with an apikey and write down the data to the same excel sheet (in a new column) based upon the response returned from the api call?

[@danielbrigida8523]

This video helped me a lot! Thanks.

[@josinvill1571]

Thank you so much sir.👍💯

[@confusedgeek277]

Nice work man really appreciates your work. Well done

[@CodePro-Jayanth]

Please subscribe to my channel

[@mauricehason]

Awesome, this saved me a lot of time. Is it possible to save the JSON file to the same location as the HTML file on the server instead of displaying it on the screen?

[@guapeousa]

Amazing tutorial! thank you! I have a question: How can I fetch the data from the new json data we just created? Or how can we save that json data into another file called "data.json" within our VS code? Thanks in advance for the help

[@cristobalzapata4945]

query, i have done a test putting the same code in js . It happens that if the column is empty, I don't get it, it returns the entire object. if any record of the column is empty. xexample: [{'x': null, 'y': "data"}], what it does is return me like this [{ 'y': "data"}]

[@ChiranGB13]

Your code does not display excel multiple sheets data in document.getElementById("jsondata").innerHTML=JSON.stringify(rowObject,undefined,4); Is there a way to display multiple sheets data in tag. Also how to display it in HTML Table?

[@shakedbukai8079]

really nice video and you explain perfectly is there a way to update to the web page when there is a change in the excel file? tried to do it with setInterval but it doesnt seem to work

[@madison_master]

Hello friend, do You know how can I pass the json to php to insert the data into sql? I'm trying but I cannot get to take out rowObject variable to send it to php

[@alinemat6384]

Hi I`m trying to do exactly as you did, but there is a problem. the variable "selectedfile" is globaly defined. So the Eventlistener of the input object changes it only locally. The EventListener of the Button sees only an undefined variable !! Thats the problem with me. Now Could you please help me to fix it ? Thanks

[@tienattr8227]

how can i display like a list of table, sir?

[@antonielresplandes]

How do I put a save file button?

[@kuthub1989]

Thank You, So Much. You have done a great job. keep doing.

[@CodePro-Jayanth]

Please subscribe to my channel

[@chewlujing4403]

thanks for sharing, it's very useful!

[@CodePro-Jayanth]

You are welcome!

[@denissidorov7151]

if I want to download a few excel files?

[@linyerin]

Good tutorial, thanks

[@mrudulkolambe3307]

Great Work!!!💯

[@KhangHoang-pr9kq]

thank you. How can i start reading row 10 of the file, sir??

[@chethanchethan4430]

Can I have the link for your sample xlsx sheet ? To know how did you put up content in it

[@Gyffet]

i got an error 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob' how can i fix it?

[@ravia8220]

Great video, it helped me a lot.

[@dibyajyotimohanty9252]

Can you plz make a video for nested json file into csv by using java

[@rontindoy5738]

this is great!!! thank you for showing us how to do it!

[@CodePro-Jayanth]

You are so welcome!

[@khoroshoigra8388]

galing no

[@zkbn485]

thank you bro! but how can i insert a table[ ] ?

[@baturserter6540]

Thank you very much.

[@gopilakshman6508]

Superb! :)

[@peshotod]

Very good tutorial.But there is one problem.JSON string cannot convert excel time from binary numbers to date and time format.The browser console can. JSON convert - "TransactionDate": 44595.43541666667, "EndTime": 44595.436111111114, Console.log convert - Ready To Batch,02/03/2022 10:27,02/03/2022 10:28,

[@asmitshrivastava7689]

Thank you so much brother .

[@CodePro-Jayanth]

Please subscribe to my channel

[@hakeemremila1688]

Well done great job :)

[@levialviter2302]

You're the shit. You've just saved me

[@pbooth88]

useful video, but the sound quality is so very bad.

[@andresrodriguez3930]

You sir, are a legend.

[@prasheetpathak685]

TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'. Anyone suggest the solution for this error . Any help will be appreciated

[@pouf2night]

This is very nice! First of all thank you. I just have one question about the code (I am a beginner ++ , so sorry if it's a silly one) what is the data array intended for? let data=[{ "name":"jayanth", "data":"scd", "abc":"sdef" }] I cannot figure it out and it does not appear in your explanation video. Thank you very much!

[@CodePro-Jayanth]

Please subscribe to my channel

[@ottoduke8942]

pro tip : watch series at flixzone. I've been using them for watching loads of movies lately.

[@lochlanelliot3127]

@Otto Duke yea, I have been watching on Flixzone} for since november myself :D

[@nikhilt7617]

How to read an excel file which contains only headers in the first row? No other data except headers

[@CodePro-Jayanth]

When you read the data from excel you will get array of objects. Then you can use Object.keys to get the key of first object

[@quadral.shorts]

Hello sir! it says sheet_to_row_object_array does not exist.

[@quadral.shorts]

lol, they changed it to sheet_to_json.Thanks good sir

[@gabrielaquino9391]

Hi Sir how about the excel with date format

[@CodePro-Jayanth]

medium.com/@jsomineni/change-the-code-like-this-when-creating-a-workbook-78f26dc14ec7

[@gabrielaquino9391]

@@CodePro-Jayanth wow thank you :)

[@pallavi95028]

IN IE 11 when uploaded the xls file it was not working any solution for that

[@CodePro-Jayanth]

I will check and let you know, can you tell me what exactly error is

[@pallavi95028]

@@CodePro-Jayanth Object doesn't support property or method 'attachShadow' this was the erro it is showing in the console

[@hakeemremila1688]

Can you share you Excel template please ?

[@CodePro-Jayanth]

You can upload any excel but it should have only one sheet

[@arifdevcoding]

great bro!

[@CodePro-Jayanth]

Thanks 🔥

[@CodePro-Jayanth]

Please subscribe to my channel

[@dayroncarvajal4314]

Muchas gracias hermano (y), me sirvio mucho

[@ahmadyasir872]

this is awesome! can you do this in angular? that would be outstanding!

[@CodePro-Jayanth]

Sure very soon,pls subscribe for updates

[@CodePro-Jayanth]

kzbin.info/www/bejne/n4XCnWOiYriDers

[@EmmanuelNgwandu]

Thanks for sharing

[@CodePro-Jayanth]

Thanks for watching!

[@CodePro-Jayanth]

Please subscribe to my channel

[@SZOKE19940321]

nice

[@JustThink2000]

Thanks!

[@patarebenezer]

Cool

[@RunySharklel]

Maestro

[@pranitchavan4549]

👏👏

[@zia44ful]

Very bad audio.

[@CodePro-Jayanth]

But the content is good, it's my first video Sorry for the inconvenience

[@gpcubo4478]

SOS ]UN CRACK

[@anish92]

Thank You so Much