Turning Form Data to CSV files with JavaScript

all right so today we're going to be talking about how we can take form data turn that into a table display and also export it as a CSV file so this is kind of a basic simple spreadsheet type layout so we've got this form with a few Fields when the user clicks on Save we're going to add rows to this table down here we're going to add the ability to double click on one of the table cells and edit the data that's inside there and update our stored data and then clicking on the export button is going to be able to take all of this data and turn it into an actual CSV file that the user can then download so the export button is going to save the data and Trigger the download all right so let's take a look at this in the HTML very simple layout we've got a form element with those four fields that we saw at the top fname lname email and username just simple basic data our save button and then below we've got a t head and a t-body so in the head those are the headings in the body this is where we're going to put the data so it's going to look something like this there's going to be a TR with four cells and inside of here we're also going to add some data properties so I'm going to add one in here like this data row that gives me an indication which row it is so when the user clicks on one of these cells to edit we'll know what row in the table they're editing and inside of each one of these We'll add a data call property so we'll say okay this is column zero and this one is column one just like that and we can also if we want do something to indicate what the name or ideas we've got the same name and ID on each one of these inputs I'll show you why in just a moment but down in here we could have a data name property where we take the name of what it is that we're saving something like this so if you do want to save that data in a file later on we can do that all right that's what we're going to build so let's jump into the script I have the basic shell structure of what we're going to do so the function names are already there with some comments inside them and a couple lines of code not a lot when the page loads we're going to call our init function and we're just going to add the listeners inside of here I'm going to put a submit listener on the form element that's going to call my function to save the data this is the one that's going to gather all the data from the form and this is going to be why we use the name attribute as well as the ID the export button is going to call a function and clicking on one of the table cells so we're going to take the T body because we only want to have one click listener for the entire area with all the data so the T body is the parent of all the TDS it's the parent of the TRS but also the TDS so this is going to be what we use as our trigger to call our function to edit the data all right so save data we'll start with that user is going to be filling this out clicking on the save button or because we're using the submit listener on the form I can also hit the enter key and that's going to submit form so inside of here we have our EV our event object this is the submit event gets passed down to this function so format event listener submit EB is the submit event prevent default stops the page from reloading very important with the submit event anytime you're dealing with a form object and the submit event if you want to do some processing on that and handle the data other than having the page sent to whatever the action in the form element is you need to call the EV prevent default so the target of the event that is the form this thing right here and we're going to create a form data object now we could create an empty form data object and then append each of the four values in the order that we want but you can if you want just pass in the form object so this form right here from our HTML if any element has a name attribute it will be included in that form object that gets passed into form data if the name elements are missing those values do not get passed in so that's very important to remember if you don't have the names this is going to give you nothing so we have now the form data and we're going to pass it on to these other functions we want to call the cache data to save the data we're going to call build row to build the row in the table so app.cache data and we'll pass in our form data object that we created and then we'll do the same thing here app dot build row this is to update the table display there we are now once that's done I'm assuming at this point that we've done all the work that we need to do with the form data so I want to clear out the form and I want to put the focus back into the first input the first name field so we can do that we can say form dot reset that'll put it back to whatever the value of the form was when the page loaded and we can also select that first name field so get element by ID F name was the first name field and we'll focus on that so these last two steps aren't something that you have to do to make this work but if I'm filling this in putting in values through all of these fields when I hit enter to submit the form it's nice for the user if this gets cleared out and the focus and the carrot gets put back into that first field it just makes the data entry a lot easier for the user it's a better user experience and that's what our last two lines are going to be now cache data we want to save the four values from here and I have a global property inside my app object called Data this is where I'm going to save all that information from the form data object so inside of here we want to extract from the form data and we'll update app.data that's going to be well actually sorry it's just one row that we're adding here and this is an array so I'm going to call Push what I want to put inside of there is an array of values so array from and form data this isn't an array itself it is an actual kind of object it is a form data object so we have to call one of the methods on the form data object and values value but values that will give us an array of the four values from the four inputs so it just goes to each of the four things inside the form data object gives us only the values not the IDS or the names but just the values and really that's going to be what we want when we build our CSV arc our comma separated value file and just to take a look here console.table we'll take a look at app.data at that point all right so let's open up our console so we can take a look okay there we are so I'll just do this Sam Winchester I hit enter and there we are there are the four values in the first row of that thing so I'm using console.table because it's an array I can display it or it's a two-dimensional array I can display it as a table so that's what I'm doing here those are the four values that we just saved inside of app.data now I'm going to do the same idea as this but we want to write them out as a row in the table that's our build row function passing in the same form data object we're going to find that table body I used a big selector here I could have just done display t-body or just t-body there's only one on the page but just to be more specific I'm going to create a brand new table row and I want to add that row counter the one that we are talking about back here in the table as we're building it we want to add this in each row so I need to know how many rows I have so we're going to call set attribute and we're going to be building that table Row the value that we're going to put inside of here if I find document query selector inside my t-body element the only one on the page TR that's going to find the first one query selector all is going to find all of them if I find the length of that that will tell me how many rows there are so if there are currently zero now that is going to give me the number it doesn't matter that I've already created this first one it doesn't exist inside of the tea body yet so the length is going to be the value of this and I don't doesn't matter if this is a number or a string because once it goes into here it's going to become a string all right now every time we do this we're going to be setting the column number to zero so we'll create that as a starting point and now I want to Loop through the form data object this thing right here now form data a form any form data object has those methods we've got values that we used up here there's Keys which will give us just the fname L name email and username but I want both I want the key and the value just because I'm going to put it inside of my TD cell so I'm going to call entries this is going to give me an array with two things the first thing is going to be the key the second thing is going to be the value and I can do a four of loop to Loop through this because form data.entries gives us an iterator that we can use with a four of loop just like this there we go so let entry of form data entries form data entries gives me an array it gives me the first array and we're going to Loop through that one and we're going to set the inner HTML which is currently empty we could be specific here we'll say enter HTML is equal to an empty string currently and we're going to say plus equals so we're going to add to that inner HTML we're going to add to that and this is going to be our TD we need data call inside of here we're going to put our variable for the call number inside there and then our additional one that we're talking about we'll have it here just in case I'm not going to be actually using it for any of my code but we'll put it there just as an example I want to have inside here um my entry number zero that is the key so entry right here this is the first value so this will be the key that's returned so it'll be fname or L name the First Column is going to be FNA and the second one will be L name and then email and then username so we have that this is our whole TD and inside the value that we want to put this will be our entry number one so that is the actual value all right so We're looping through we're doing all that and to increment our column number we have to do this and we have the whole thing once we're done looping through that then we have to add it to the tea body tea body dot append our new TR okay so let's try this again there we go so we have this added into our app.data object and we've built a row in our table and we can continue to do that we can continue to add more and more rows there we are and we can keep going and going and you can see app.data has two rows our table has two rows all right next up we want to be able to export this to actually create the file so that's our export data function this is the one that gets called when the user clicks on the export button so down here app.data I'm going to add onto there the very first row that's going to be inside of there this now by adding this on to the beginning of app.data I am updating that global data and if I do the export twice it means the second time I do this it's going to have these entries two times so it would be better if we copied app.data and then added this to the copy of that just keep that in mind I'm just going to skip over that and say I'm only exporting one file so we're adding this to the beginning of app.data this data right here we're adding a row on the top of that we want to convert the app.data array into a series of strings I don't want to just call json.stringify because then I'm actually going to have those square brackets inside of there and it's not going to work as a CSV files CSV files can't have the square brackets it's got to be just string string string string with or numbers with commas in between them and ideally quotation marks around each one of the values kind of like this without the square brackets that's what we have to do so we're going to Loop through what we have here I've got a starter string that I'm going to create and append to just like the inner HTML for the table we're going to do this and then we're going to Loop through app.data for each we will look at one of the rows inside of our array so we've put this on to the beginning we're going to Loop through this and all the other rows of data so looping through this is going to be a row like this and our string I'm going to just append to that the result of doing a map dot join dot concat the join is going to say hey what do you want to put between each one of the values well I need a comma I can do a comma and a space if I want or just a comma and the concat is what do you want to have at the end so join is going to take all of these and put the three commas inside of there and then concat we're going to take that string and at the very end of it I need to add a new line character so I'm going to do that inside the map this is where we take our values and turn them into Strings wrapped in quotation marks so let's call it call and we're going to return json.stringify if I could spell that of that call Value so call is going to be first name then last name then email then username so I'm going to take that and just in case there's quotation marks or other special characters inside there we stringify it which will take whatever's there turn it into a string and put quotation marks around it so when you take a string and you stringify it you get the quotation marks put in then we put the commas between each one of them then we add the new line character at the very end and that is going to be the actual string that we want to put into the CSV file so what am I going to call it data export plus a timestamp plus dot CSV so I'm always going to have a unique file name because I'm doing this timestamp you can call it anything that you want that's just the name that I'm using here so file we will create a new file and it's going to take an array of data and what you put inside of here is completely up to you but it can be a string in this case it's this string that we created that is the contents for my file what do I want to call it well the file name that I just made up and the third option is the type and it is text CSV now if you're looking for more details about working with files if you look up there at the top you'll find a little curd linking to playlists that I did about videos and blobs and strings and all kinds of stuff like that type to raise all right our last step we've created the file now I need an anchor tag that links to the file that I just created and lets the person download it so create an anchor the same way you would for any web page document create element a the href is going to be a pointer to this file which is just sitting in memory so it's an actual file object but it's just sitting in memory there is a built-in create object URL method and you can pass a blob a file is a kind of blob so we're going to pass that to here and we're going to get a URL that points to the location in memory where that file is saved download that's going to be the file name so we're adding a download attribute to the Anchor tag and the value of it should be the file name that the user is going to get to save they can change the name if they want but a DOT click so HTML elements have a click method not just a click event but a click method that simulates clicking on them there we go so save that we'll come back here we'll enter some data there's our data and I will click on export there we go and we save and there we have it we have saved a CSV file if I click on that it will open up with my default program for working with CSV files which happens to be numbers and there it is this is an actual CSV file opened in numbers there's the headers that we inserted and there's the two rows of data all right last step in this whole process was to be able to edit and that's just a few lines of code so we want to jump back in here in our edit cell function so this is called when we double click if I go back up to my ADD listeners function so when somebody double clicks on the t-body we're going to call edit cell and EV is the event object I'm going to find the TD that they clicked on so cell is going to be EV Target closest this method finds the closest match for whatever CSS selector you put here I'm assuming they've clicked in a TD if there is no TD that is apparent of what is clicked on this will give us nothing which is why we have the if statement here I'm going to find out the row so I will go actually these two lines what I'll do is I'll just move them down inside of here don't have to do anything else if it wasn't a TD once we have the cell go to its parent which should be a tr get the data row value and here I'm doing the unary plus operator to convert this value from the attribute which is a string into a number and I do the same thing with the cell's own data call attribute so I've got the row in the column that tells me the position in the array where I'm going to be editing these things all right so we have our cell the one that they clicked on I want to make it editable and thankfully in HTML5 all we have to do is change one property content editable now this doesn't work on absolutely everything but on most most uh elements it does that makes it editable the person can actually start to type and change the content there now I do want to focus on there so when they double click it's just going to sort of highlight and select the whole thing I want to focus that's going to put the text carrot inside of there and we'll save our text we'll say okay let the text equal cell dot text content that is the actual content so that basically has made the cells editable user can then start to type they can change the content of what's inside there I need to wait for the person to finish typing the way that I know that they're done is they hit the enter key that's what we're going to take as our trigger so we will say sell add event listener we're going to listen for the key down event every time a key is pressed we're going to create a function called save I could do this separately I'm just going to embed it inside of here so when the person hits the enter key that's when I want to save so I need to check and see okay this event is the key down event so if event dot key is the word enter or EV dot code equals enter so one of those two things should be equal to enter person's typing they hit enter then we can say you know what now you can no longer edit this thing so we'll set it to false there we have it and we're going to remove the event listener for this thing need a period there remove foreign so that is going to say basically stop listening for the keytown event on this cell I don't need this function anymore it can be thrown away I don't need it and the app.data array that's what we're going to update so inside of there the row that we're going to update the cell sorry the call that we're going to update we got those two values right up here so whatever row whichever column that's the one that we're editing inside of here and that's going to be equal to the new value of cell.txt content and we may as well at this point console log table take a look on the logbook console table the value of app.data so we can see that we have actually made the changes in there all right that's it we now have we now have basically a spreadsheet so I can edit these I'm going to double click on this one hit enter it's saved and if I squish this over a little bit you can see yes Winchester it was saved double click on this one hit enter there we go we've saved it and we can export it and we have now the updated version and there it is with the latest values and that's it that is turning a web page form into data collection that you can then turn into a tables displayed worth of data and also the ability to edit that data and Export it as a CSV file so hope that helps you out hope you find that useful if you have any questions feel free to leave those in the comments I answer whatever whatever I have time for and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 6,331

Keywords: MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, csv, form to csv, data to csv, javascript csv export, csv export, web page csv export, create a csv with javascript, files, blobs, createObjecturl

Id: MsHrntNF0Z0

Length: 26min 13sec (1573 seconds)

Published: Thu Jan 12 2023