The fundamental problem of converting from JSON to CSV is that JSON allows for nesting objects and arrays, whereas CSV doesn't allow for that. So any quick conversion from JSON to CSV will result in some very less than ideal CSV, but that ends today! JSON ReShaper is a React app that allows you to define how to convert your JSON into CSV.
Check it out in Action!
Got your interest? Sweet! Now you can learn how to use it and what each component of the app does.
This text box is where you will put in the JSON you want to convert into CSV; this will be known as your input JSON. Whenever you paste JSON into this field, it will automatically be formatted. Or you can type out your JSON manually, but who would want to do that?
This field is where you can specify a JMESPath query that will applied to your input JSON. The result of this query must return an array of objects, otherwise things will not work as your expect them to.
The filtered JSON component is a visual preview of the JSON that will be iterated over; this should be an array of objects. Each object should be thought of as being a "row" in a CSV file.
This is where you define what columns your CSV file will have. Each column has a JMESPath query to select what information from said object from the filtered JSON will be used as the value for that column.
If you need support for parsing timestamps, you can select the date data type and it will give you two extra fields; what date format is the value currently in (i.e. what format does the filtered JSON have it in) and what date format you want to be used in the CSV data. This project uses dayjs' formatting to parse and write timestamps.
For handling unix timestamps or epoch time (seconds since Jan 1 1970), you may use the special keyword unix instead of a date format.
This section contains what your CSV will look like when opened up in a spreadsheet software.
Note
If you would like to copy/paste this data directly into a spreadsheet, change the output to TSV (tab-separated values), and hit the copy button. Now, you will be able to paste directly into a spreadsheet.
This repo follows the standard setup for a React 18 application managed by Vite. We use Tailwind CSS, along with PostCSS to add support for some future features, such as nesting. The core application is written in TypeScript and we use EditorConfig and Prettier to keep the formatting of the codebase consistent.
If you would like to contribute to this project by adding new features or fixing bugs, please communicate what you intend to work on by creating or commenting on an issue or pull requests.
To get your local development setup so you can test your work, use the following steps:
- Clone the repository from GitHub
- Install all the dependencies
npm install
- Run the local development version
npm run dev - Lastly, run the unit tests
npm test