How to Read/Parse CSV File in Browser with Papaparse Javascript Library

[Music] hello and welcome to South Bridge today you will learn how to read CSV file on the browser using the Papa parse JavaScript library so this is the website of Papa parse Papa parse calm so you can read the documentation so let us download the pop-up ours so here I have already downloaded Papa pears minified version so here it is so here is our HTML file I will put the title read CSV then let us reference the the Papa parse library so I will put an input element to upload our CSV file so input type so let us enter file and I'm going to delete this name attribute so I will assign the ID upload - CSV then let us put the attribute accept and put that CSV so that our final our final element will accept that says we file extension only so I will put a button I will set the text to read CSV so ID is BTN upload - BTN upload - CSV and then I will I will create a table element table so in this table I will going to display the contents of the CSV file so let me name it DBA data so let's try to view it in our browser so here is our final element so we can choose CSV file so I have CSV file here named sample data that CSV so it is the same says we find like I have used in the C programming tutorial on how to read the CSV file using the C programming language so let's try to open the file so here it is so as you can see our file element will display the file name the sample data that CSV so for now our button reaches we have no functionality so let us let us set the click event on the button so let me type the script tag I will create a variable between upload so it has referenced bit and upload CSV button so document that get element I D so let us put the idea of the button BTN upload CSV then let us add an event listener so add event listener so the first parameter of the add event listener is the event and then callback function okay so for now let's just check if it detects our click event the button is clicked so let us open our console ok it is working the click event is working so next is I'm going to I'm going to reference the pop-up bars so you can check the documentation on how to use the pop-up arts library so this mapa that parts method we will assign the file so let us reference the file get element by ID what is the ID upload CSV that files then zero so the next parameter is the options so you can check in the documentation of Papa bars and the options so here okay you can put properties so there are there are a lot of options to set so I'm going to put the download option download set to true and then header going to set it to false and I will show what this header property due to our CSB or to our JSON object so next is the complete come back so there's a sign variable so first is we we will just display to the console the results variable to check if we have response from the Papa bear's library so now let's let's try our code so let's refresh our page then let us choose the sample data that CSV then let us click the read CSV so as you can see we have an object here so so the data property has an array so the first array is the headers so let us try to view our sample data that CSV so the papa burst library sent us contents of the CSV file now we will try to loop through this object and let us display it to the table in our HTML file so now let us put some logic in our complete callback function so let me look through the results object so results that the data so why I am typing the data because the data object contains our erase erase from the CSV file so data map so oops let us create function let's put a parameter data so this data parameter is if you can see it as a table so our map function or our our data parameter is the row of that array so let us display the data let's see if we get the same object so as you can see it is the same data but it is displayed object by object since we are looping through the data object so now we can customize and create the table head and the table row of our HTML table element so let me create some function so function generate table head so let me assign the parameters the table element and object so let us create the table head so table that create the head then we have to insert a row in the table head the insert row and then let us look through the data the data that we will assign to these parameters the data parameter so so for each object from the data scale the object key from each data so let me create th element document the create element so th and then let us assign a text so text document the create text node so as you can see I am assigning this key variable to the great X node function and then let us append the text to the table header up in child then lastly we will append the table header to the row so let's try to put our generate table head function in the loop let us reference the table the table element in our HTML file so document.getelementbyid II so table - data DB l - data [Music] then we will call the generator table head generate the ball head I'm going to assign the table element and then the data so this is the data but this code here will generate our all of our data into a table head so let us check this code first so refresh choose our CSV file read CSV so as you can see our table is populated by the data but if we check to the HTML generated by our function all of these cells is a table header so this data here is a header so we don't want to do this we want to make it as a table row so there are many ways to do this but what I like to do is to create my if-else statement so if is equal to 0 so what is I is let's create a variable I and let us assign the value of 0 so if I is equal to 0 it means the data object is accessed for the first time or let us say the first loop we want to create this table header okay so if the I variable is greater than zero we will generate table rows so else let's create our generate table rows function function generate table rows so again we will put the table and data as parameters so let me insert a new table row so let new row table that insert row so let us assign an negative one and then we will look through the data data that map oops okay let me create an arrow function roll and then index so I'm going to insert a new cell so let's create a variable new cell and the new row that insert cell so let's create the text of that cell so new text document create text node and then let's assign the row so the row here is the row our parameter or our callback parameter and then let's append the text into our new cell new cell that append child new text okay so let us try to reference our HTML table again and then let us call our generate table rows function then assign the parameters okay so let us try to Jack or see if our code works refresh the oops syntax error on line 51 various line 51 okay so the error is gone so let's select our sample data that says B and click our read CSV button I forgot to put the increment here so in every loop the I increments okay so that's the problem okay again let us try our our webpage so as you can see the Rose is created through this this HTML element the table data or the TD so only the first row is created using the th ordered table header element that's how we can read our CSV file from the browser using the papyrus library so you can try to customize this code and also I would like to show you if we assign this header to true so let us comment this out okay so for now we are going to display the results into the console so let us try to see what's the difference between the header he said to fall sir the truth so here are our data so as you can observe our JSON data is created in key and value pair so it looks like that they because JSON object we are used to so every value has a key so the item is pencil the order date is very 9019 so if you'd like to read the data in this format so you can set the header to true so again please check the documentation of the Papa bear's library and try to explore these options on the config object so that's it guys I hope you learned something in this video bye [Music]

Channel: SouthBridge

Views: 26,825

Keywords: Read CSV, Parse CSV, Papaparse, Javascript, Browser, CSV to JSON

Id: WrI19Qp6Uoc

Length: 24min 55sec (1495 seconds)

Published: Sun May 24 2020