Export JSON to CSV File in React JS | Download JSON Objects as CSV File using Javascript

hello guys welcome back in this video tutorial we will learn how we can export Json data to a CSV file like we can export the local data to hcsp file or we can export specific Columns of a local data to a CSV file or even we can export the remote data and similarly specific columns from of the remote data like if I click on the export local data so it has exported the data in a CSV file and if I open it it has the name age and address right and if I export specific columns so it will emit the address column and it will only have the name at the edge right and similarly we can export the remote data so it will make an APA call to the server and then we'll fetch the data from there and it will have ID to do completed and user ID and if we want to some specific columns like we can only have the ID and the to do we can do that as well or if even we can change the column names like the ID may be in caps and 2 to maybe we can say the task name so we can do that as well so if I click on the specific column export data so and I open that here you go it has ID in the caps and the task name right to see how we can achieve that let's get started I have an empty react.js project that is showing nothing right now so let's go ahead and start adding different components and functions to achieve export Json to a CSV file right so let's add in H1 in the start we can say export Json to uh CSV file right here you go maybe we can add some styling to this div so that we Center everything here so here we can say display is flex and just if I contend to be Center and then we can say Flex direction to be column and give it a width of 100 v w right and also align items to be centered as well okay so we have the H1 then we can add our button uh we can say export so we will be implementing two type exports one will be local Sport and one will be exporting uh data from the remote so here we can say export local data right so here you go and on click of that we can Implement a function we can say on export local right so we can copy this one and add the function here and here we can dictate some local data that we will be exporting right so we can say cons data is equal to that will be an array of objects right so maybe we can export uh the data of a person so we can say name is maybe name one and then the age may be one two three and then we can say address right we can say address one right so we can copy this one and add some more records in this data so maybe three records so we can say name two and then the address to you can change it to this one and three three and maybe you can see the edge is this right there's a comma missing here right so this is the data that we will be exporting right so to export a Json data to a CSV we will be using an npn package that is export from Json right and these are the commands to install that so let's go ahead and install it so it will be installing and to export the data what we need to do is we can just import it so let's import that at the very top and then we need to clear the data so we have already created the data here right so then we need to give the name of the file that we want to be exported so we can say local data right and then we need to provide the type of the file to be exported like whether it's our txt file to exporter dot HTML or the Json or the CSV so we are supporting a CSV file here right and then and at the last uh we just call it so providing the data and the file name and the export type right so if I save it it has been installed and go to the app again so if I click on export here you go it has exported the data so if I show in the finder here you go the name column the age and the address right and the same data what we have written here it has been exported right so by default it has exported all of the columns so if you want that you can skip some of the column like we can say we only need the name column and H column we can do that as well so maybe for that we can uh add another button and here we can say export you can say specific local data right and just copy it here and we can say cost and okay so because we were using the same data we can cut the data from here and add at the a little top so that both of these function can use this one right we can copy this function and paste it here we can say local specific data Maybe and the type is the same and the data file name and also we can provide the fields that we want to be exported so it will be an array so we can say we want the name and the age and that's it right so if I save it and go to the UI these are just overlapping so maybe we can add some style here we can give it a cap of maybe 12 pixels right okay so if you now click the uh this one we can say export specific local data right we'll say columns okay so if I click on this one and show in finder so you see it has only exported the name and age right so the test column is not exported and if I click on export local data so it should have exported uh all of the columns name age and address right so this is how we can export the local data right so similarly we can export uh the data from a server or the our remote URL so we can add a button here and we can say export remote data right and here we can say on export remote data and we can declare the function here okay maybe we can copy this one and just replace the name with this one and we can say local instead we can say remote data and CSV the data will be will be fetching from a server so for that we will be using the a dummy Json so from here we can maybe export the to-do's right so it contains the ID to do completed and user ID right so this is the API call that we will be using to export the to-do's so here we can say we can fetch and then here we will be getting the response right and after we have the response then we can export that so cut it from here and here okay so here the data will be whatever we are getting in the response dot to Do's right so we can say data is equal to response Dot to those right and we can meet the field name so here also we can provide the film uh whatever we want suppose we do not want the ID we can provide here that we only want to lose and complete it and maybe user ID right so we will emit this one and just save it if you go to the UI export remote data and if I click on that here you go it has exported the remote data and it's showing finder here you go the ID to do completed and the user ID right and similarly if you want to export uh specific columns so we can do that as well so let's copy this one and we can say export specific remote data and we can provide here the fields right and that will be maybe we can say what are the fields we can say ID to do and the completed right you can say the ID and the to do and completed right so if I save this one and let's add the button for this one as well so we can say export remote data specific columns right and if I save it and it will be on export remote more data right okay and if I click on this one here you go okay here you go uh the user ID has been emitted right and we can even change the file name for this one as well we can say remote let's see if it data right and here you go remote specific data right so even we can change the name of this header as well so suppose right now this is saying ID to do and completed so if you want it should be named something else we can say this is the task name so we can do that as well so for that instead of this ID to do and providing the fields we can give it a mapping uh we can say the to-do should be named as task name and ID should be named as the capital ID and maybe we can see completed should be completed right so it will be only exporting these two right so if I save it and specific columns show in finder here you go ID and caps and the task name right so there are multiple ways uh we can export the data in different fields or specific Fields right so here is the npm package that we are using right and we need to provide the data the file name the extension or the the Expo type right and then here we have provided the fields either it could be a string an array of string or it could be a mapper uh but we need to call a particular column in our exported file okay so this is how we can export the local Json as well as the remote Json to a CSV file right so what we have done is uh we have added some buttons uh for the specific functions like export local data as Oxford specific local data columns right and same for the remote data and we have added the only functions on that and on click of those function uh what we are doing is we are providing the file name the export type and then just calling the export from Json function and we are providing that the data the file name and the support type right and if we need a specific fields we can we can give the fields in an array or if we need a different field name so we can provide them in addition we are the map right and on the top we have added the local data and if we need to export the remote data then we have added the fetch AP call and we are fetching the data and once we have the data then we are exporting that right so this is how the export Json to icsv file works but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 5,896

Keywords: reactjs, json, export json to csv, Export JSON to CSV File in React JS, Download JSON Objects as CSV File using Javascript, JSON object to csv file download, export json to csv in react js app, codewithaamir, Convert Json data to CSV or Excel File, simple export json data as csv file, export-from-json, json to csv converter code, convert json to csv for excel or google sheets, convert json data to csv, json to csv converter react, export json to csv javascript, react json to csv export

Id: _UYxBT_Qwt0

Length: 14min 8sec (848 seconds)

Published: Fri Feb 24 2023