Parsing a CSV file with JavaScript

what's up calance friends today we are going to be taking a CSV file parsing it and converting it into a table let's get right into it all right so we're starting off with an empty project and we are going to create our index.html and we're basically just doing everything as vanilla as possible so that no matter what framework you're using you can always apply this technique and let's go ahead and change the title uh we're going to go ahead and we're going to add a CSS file style.css we'll come back to that a little bit later not super worried about that right now but we're going to want to make this table look a little bit better than just the default browser stylings um so in our body we're just going to put an input and we're going to do type file so we're going to go ahead and apply an ID let's just call it file keep it simple you can call whatever you want though it's just going to be what you use from a selector standpoint in your JavaScript and let's go ahead put our table as well so we're going to put our table and we're going to give it the ID table um again call it whatever you want and then finally we're going to have our Javascript file let's call it app.js we're going to do everything in JavaScript usually I prefer typescript but since we're keeping this as vanilla as possible we're just going to use JavaScript but I would prefer if you use typescript and we're going to go ahead add a script tag here and it's going to be app.js so that's pretty much all we need then script Source you could add you know more to the script tag if you want but this will still run just fine and we're going to go ahead and move into our app.js now in here we're going to wrap everything in an immediately executed function and inside of this immediate executed function we can start defining our varibles so we don't uh pollute the actual window and so let's go ahead and Define a variable called delimiter and that's going to be a comma because we're going to be using CSV files that actually have a comma separated delineation or and uh but you could actually use a CSV file that doesn't have a comma you might have semicolons instead right so whatever your delimiter is for your file this will work but most commonly used delimiters are commas for CSV files uh I'm not even sure if they call it a different file if it's a different delimiter or not but regardless um we're going to Define our new line character as well so we're going to Define it as just back sln um sometimes you know in Windows worlds you have like like SLR sln or back SLR back sln we're going to just Define it as back sln uh we're going to grab our uh doc or our file input so we call it input we call it I doesn't really matter but it's going to be document. getet element by ID and we're going to use file we are going to to use a variable for our table as well which is just get element by ID and it's going to be table now we can just do a quick little check if not I then we're going to return since we are defining our script tag in our body all of our elements should be defined when this function executes so they should exist I should exist here uh if not nothing's going to happen when we actually uh select a file and then we'll be able to go and see what the issue is uh we'll be able to log and figure out what the heck's going on but if this file doesn't exist it's something that you as the coder are doing wrong and it's not something you know that the users doing so we can add our event listener which is going to be I the add event listener and we're going to do it on the change event and what we're going to do is we're actually going to check if the file exists so what we can see what we can do is we can do an if statement we can say if not i. files which i. files is going to be your array of files that are contained within this element um and then we can say and i. files. length is greater than zero then we know that it exists right so we can actually have a function call here let's just Define that function real quick we'll call it parse CSV and we're going to pass in a file so we can now just call parse CSV and we're going to not pass in file it's going to be i. files Z right all right so we we know that this is you know length is greater than zero we know we have something in there for selecting multiple files you could pass in multiple files and create multiple tables if you want but we're just going to be working with a single file at a time so now that we're actually going to parse this file we can say you know if not file and we're going to be using a uh a object or class whatever you want to call it it's an actual API built into the browser called file reader so we can check if that actually exists we can say if not file or not file reader then we're going to return you could alert something here you could log it to the console uh we're just going to return I'm fairly confident this is going to work this file reader is almost supported across everything at the at this point in time you can check can I use if you want um but file reader is an API that is widely used today and so we can actually instantiate a new instance of this file reader so let's go ahead and call new file reader and we're going to attach a load listener on here so you can do reader. onload equals function um I believe you can actually use ad event listener too if you want but we're only going to have a single function or a single load function so that is not as important again you could do on change up here if you want but I just prefer the ad event listener for you know these types of events and with instantiated classes when you have a single function I for whatever reason it's a style thing I prefer just doing the single function on the onload property um and so we're actually going to be calling a new function here but to actually get this thing to load we need to call a function to essentially uh kick off the process right and so the function that we're going to call is going to be read as text so there's a couple different functions here there's read is array buffer read is binary string we are going to read as text and we're going to pass in the actual file that we're parsing right and so this is going to parse the file and and basically return it as a long string of text so in here we can go ahead we can call a function that let's just call it maybe like two table and it'll be a text input which is going to essentially be the string of that is basically the entire file right so we can go ahead we can call to table and it's going to be e. target. result and this property is going to contain the entire file as a string so we're now going to get this string in this function here and in here you can actually check if not text or not table then just return nothing's going to happen um and so we're just going to make sure that we don't error in our actual function and so the first thing we kind of want to do is we kind of want to clear this table because every time we create a or every time we select a new file we're going to clear the table and basically create a new one so we can say you know while table. last element child uh let's see table. last element child and this is essentially going to be this table element here and you could do a not knot if you want to just be very explicit um that just converts this to a Boolean as opposed to just you know having it be essentially a maybe not value right um so we have while notot table. last element child we just want to remove that so we want to say table. remove child table. last element child all right and that should clear the table next we can grab all of our rows so our rows are going to be text. spit and we're going to split on new lines this is going to give us essentially an array containing all of our rows that are that are Disconnected by a new line character um which includes actually the header which is going to be that first row so we can say headers equals rows. shift which should pop off our first value in that rows array and we're going to now split that by the delimiter value so this is essentially going to give us an array of all of our headers now the first thing that we're going to want to create is a table row that contains our headers so what we can do is we can say we can create a variable and we can say document.createelement and that's going to be a TR element and then we can do our headers do for each function and this is going to essentially allow us to iterate over each one of our headers and each of our headers is actually a string value right it's the actual name of each of our headers so we can say Barth equals document.createelement it's going to be a th which is a table header um and it's a table cell or table head table header cell right and so each of these cells is going to contain the text value of our header so we can say uh but what we want to make sure we account for is like any white space before or after the string value so you could have multiple Val multiple spaces in between the commas and everything like that uh so just to account for that why don't we go ahead and we can trim this value so we'll say h. trim and then what we can say if you know not HT then we don't even want to add it we just want to return so um that's going to be just essentially making sure that if there's any headers at the end or the or the beginning uh we don't want to actually include these things um and so that's essentially a good thing to do you could actually take it one step further and you could make sure that it isn't like in the middle if it's in the middle you probably still want to actually include it um if it's on the end you probably don't want to include it so for this particular case we're going to just leave it in here but honestly you probably don't really need to include this um for headers especially I think it's probably more important for rows but we're going to leave it in there because the files that we're using are not going to be containing a missing header so uh go ahead and we'll do um th. text content equals and we'll say HT and then we're going to say HTR do appendchild and it's going to be th and that should basically allow all of these uh table header cells to be added to our table row right so our table header row I guess you should say so then we need to actually add this table header row to our table so we can say table. a pench child and it's going to be HCR all right so next we're actually going to do handle each of our actual rows so let's create a variable just called RTR this is going to be actually one of our each of our TRS for each row in our table and we're going to say rows. 4 each and we're going to have we're going to iterate over essentially every single one of these rows and each of these rows is actually a string right that we still need to actually separate so one thing that we can actually do here is we can actually make sure that um you know in this particular one too what we can do is we can trim this value as well make sure there's no white space before or after and then we're going to trim each one of these as well so R equals r. trim and what this actually allows us to do is it keeps any extra space from the ends um to be actually maybe considered as part of the actual split value right so we're going to trim the Row first and then we're going to say if not R return and basically all this is really doing is we're just making sure that it isn't like an empty row essentially like a just somebody new line twice in there and uh we're just going to remove that and make sure that it isn't included in R table so we can say VAR calls equals and we're going to do r. spit delimiter and that's going to be each one of our columns right and we can check if you know if calls. length equals equals zero then we're just going to return as well we don't want to include an empty you know essentially an empty row with when there's no columns uh so then we're going to say RTR equals document. create element it's going to be creating a new row and then we're GNA actually iterate each over all of our columns right so we'll say calls. for each function and we'll say C and each of these is actually going to be the text value of the column so we're going to want to create our table cell do create element not create attribute come on create element be smarter vs code TD create the cell then we can say VAR TC is going to be the trimmed value of that cell so let's just say c. trim and we can say td. text content equals TC RTR aen child it's going to be TD and then finally after we iterate over all the columns we need to actually just append the child RTR and this value RTR is essentially reset each one of these you know for each functions here right so um we basically get a new element created and then we append the child every every time we Loop through each row all right so that's pretty much as simple as it needs to be um we can go ahead and run it or we can style it first let's go ahead why don't we run it first so we're going to essentially just pop this open in a web browser got it over here let's go ahead open up our Dev tools just for fun uh docu docuement is not defined so that's something that we got to handle right so I had a typing error somewhere so let's just kind of do a search for document I don't even need to search I can see it right here so you guys should have pointed that out sooner for me but if we refresh now that should be better and that's one of the good reasons about popping open that console because honestly if I hadn't wouldn't have seen that I would have tried to choose a file nothing would have worked right so let's go ahead and choose our file we got homes. c. CSV it's essentially just a list of CSV values or a list of home values right selling price list price living rooms beds you know basically just a big table right it's kind of hard to read not the best formatting so let's go ahead and style this real quick um and we can actually just pop open our CSS file here and let's go ahead and do our table um one thing I like to do is border collapse so let's just do border collapse and we'll say collapse and let's do with 100% uh let's do our TDS and our THS so we'll specify within the table cells you know regular cells and header cells let's do border 1px solid and let's do this uh kind of grayish color uh and we'll do some padding 1.5 M's all the way around um we'll do a table let's do kind of like an alternating pattern so we can do table TR and then we'll say n child and when you do nth child you can do this whole 2N ordeal and this is basically going to be all even right right even rows we're going to actually create a background color for them so our background color let's do uh basically let's just do it's essentially white just kind of like an offwhite um and then our odd our odd rows will be white still so that'll kind of keep things consistent and we can do a hover color as well so let's do TR hover um and then we'll do background color We'll add a background color here and let's make it a little bit of a darker gray right so we'll make it actually the same color as the border so essentially that kind of washes out which would be I think a good look uh and then table th just kind of style our header a little bit we'll say padding top let's do uh 1 M padding bottom 1 M so we're kind of just giving it a little bit of a bigger padding on the top and bottom um let's do a you know we could do textaline left let's just say uh and we'll do background color we'll do uh dodger blue is kind of nice I like dodger blue and uh let's see color if the background color is that we'll change the actual color to be white so that should stand out really well text align we may not need but you probably do want to set it just in case the browser by default a line Center for these so I would say it's a smart idea to put that in there and uh just to you know stay consistent on all browsers right because a lot of times browsers have default stylings for tables um chrome doesn't seem to have too much of one so surprisingly so as we kind of saw here it's pretty pretty straightforward although it does kind of look like well it looks like it's only as wide as it needs to be right so since we set it to be with 100% that's going to change so let's go ahead we're going to redo this and Bam we have a much better looking table spans the entire width of everything uh we have everything left align which is nice we could center align it or you know leave it as is personally I like tables beow left aligned um unless it's Financial then I right align it normally uh but one thing I do notice is I don't like you know these little quotation marks and that's because the actual CSV file has these designated as strings right and so if you want to remove these you can um let's see the way I would probably do it would be uh let's see let's go ahead and create a regular expression so little regular expression practice but what we can say is um basically if there is uh let's just call it Q regx equals we'll say if it starts with double quotes sorry if it starts with a double quote or it ends with a double quote then we want it to match and that's going to be for everything so that should take care of the starting and the ending quote and then what we can do is we can do this for both the header and for the uh content cell so we can say ht. replace qrex and we're going to replace it with an empty string and we're going to do this also for the actual cells here so just in case we can actually do that for pretty much any file we put in here let's go ahead and try that one more time bam removed the quotations looks significantly better if we go ahead put a new file in there this is actually a file containing uh cities and states and then the longitude and latitude values so um exactly so that's pretty cool like any any CSV files we put in here it basically create destroys the table recreates a new one uh it's super fast because it is vanilla JavaScript so bam looks awesome very quick and yeah we get our cool hover effects and one thing I will say is that with this cities I think I would challenge you guys a little exercise to I would combine all these these values and make this one header with one cell that just contains the actual lat long values so um I think that would be a really cool exercise and if anybody does it let us know and we will give you a shout out and feature you all right so I hope that was easy enough to understand again we tried to keep it as simple as possible using CSV but the same method could be applied for other file types as well right you can do XML HTML the the way you parse it would just be drastically different right you actually have to parse elements and things like that within the text which obviously is going to be significantly harder CSV is about as easy as it comes and honestly it's a great way to do import and exports for data in your application right so this really is a beginner tutorial but honestly it can be applied to intermediate and advanced topics uh especially when it comes to you know bulk uploading items into your application uh or so forth so if you guys have any questions feel free to drop them in the comments below if you guys haven't subscribed make sure you hit that subscribe button because we are always coming out with new content every single week uh make sure you check out our website we have our community membership which gives you access to all of our courses for an extremely low price highly recommend ton of hours ton of information and a lot to learn so check out our merch we have a merch store Link in the description below as well and uh you know until next time get out of here

Channel: Covalence

Views: 5,750

Keywords: Covalence, Programming, Coding, Software Development, learn to code, online coding bootcamp, intro to react, intro to javascript, intro to typescript, node.js, MySQL, .NET, React.js, free web development tutorials, software development bootcamp, web development, javascript, typescript, mern stack, express, become a programmer, how to become a software developer, programming tutorials, become a full stack developer, software careers, csv, table, html, parse

Id: oencyPPBTUQ

Length: 21min 21sec (1281 seconds)

Published: Fri Oct 20 2023