JSON < > CSV (or Excel)

[Altffenser]

What's the Problem?

No response

Solution/Idea

The idea is to go from JSON to Excel and vice versa in an easy way, repeatedly it is necessary to process data contained in a CSV or XLSX and there is no better way than to do it in JSON format.

Alternatives

Recently I use this tool that does it quickly, the situation is that a website has a limited validity and at some point it will cease to exist. On the other hand, a computer program is easier to keep available and it is even easier when it comes to open source software.

Priorities

No response

DevToys Version

No response

Comments

No response

[kennebel]

I dropped in to see if anyone else had suggested this yet. :) I use a different site for this, but I always feel a bit dirty as I cannot be 100% sure they aren't keeping a copy, so I can only use the site for benign conversions. A local program would make me feel better.

[wightspace]

@Altffenser i like this one https://csvjson.com/csv2json

[DotNetInAction]

This sounds interesting, I'd like to pick this one up if its ok @veler

[veler]

This sounds interesting, I'd like to pick this one up if its ok @veler

Sure, feel free to give it a try 😊

[sakana280]

Would a one-way JSON-to-CSV/Excel be useful? I recently cobbled together this working converter to scratch an itch:

@veler if you like, I can tidy up the code I have for it and submit a PR?

[Altffenser]

Would a one-way JSON-to-CSV/Excel be useful? I recently cobbled together this working converter to scratch an itch:

@veler if you like, I can tidy up the code I have for it and submit a PR?

Hey! It would be a good start!

[sakana280]

Here's the working JSON-to-table tool https://github.com/sakana280/DevToys/tree/JsonTableTool I still need to perform a few more checks before I can submit a PR. Feel free to build and play with it in the meantime. I couldn't test the compact overlay mode - it crashes on my PC with a marshalling error, but I get the same on latest main, so I'm inclined to think it's an issue with my build environment rather than my code.

[veler]

Hi @sakana280 ,

Thanks for trying this out, this is pretty great! :-)

I would like to share an information though: I'm really hoping to release a beta of DevToys 2.0 early spring 2024. We're currently porting every existing tool to the new version. It would be fantastic if this tool could be part of DevToys 2.0 right away. It would help releasing it sooner so we don't spend extra time porting existing tools (this is the longest piece of work to do at the moment, more contributors mean faster release 😁). Additionally, early adopting developers could give us some feedback on how the development flow for tools is.

A quick summary of what's new in DevToys 2.0:

1. Windows, Mac and Linux support.
2. Tools are now extension. Everyone will be able to develop and publish his own tool for DevToys through extensions. This is work in progress though.
3. Making extension can be 100% platform-agnostic. You can technically make an extension in .NET Standard and it should work the same everywhere without testing it on another operating system.😁
4. Tools don't need to care as much about the Compact Mode as before anymore, because the UI shrink itself below a certain size, although it's encouraged to test it.
5. Smart Detection is "smarter".

If you are interested in contributing to it, I would suggest cloning the branch dev/2.0 and take example on the recently made Regex Tester and JSON <> YAML Converter tools. They contain pretty much every UI you need here:

1. Code editor (aka. MultiLineTextInput in DevToys 2.0)
2. DataGrid
3. SplitGrid
4. Settings
5. Handle Smart Detection Please add your tool directly to the DevToys.Tools project.

The CONTRIBUTING.md on branch dev/2.0 has some up-to-date setup information. The new API for making tools lacks of tutorial / getting started steps at the moment, which is why I recommend you look at these 2 existing tools I mentioned. The public API is fairly well documented though. Here is an entry point: https://github.com/veler/DevToys/blob/4bfe62244f3b05719633ad60b41e85f037e0163a/src/app/dev/DevToys.Api/Tool/GUI/IGuiTool.cs#L46-L61

DevToys 2.0 also includes a CLI tool. People will be able to use DevToys as a command line. This requires to adapt tools to support this scenario. I think it would make sense to do it for such a tool. Feel free to take example on the one for JSON <> YAML Converter.

Finally, it shouldn't impact you much but as a heads-up, .NET 8 support is coming: https://github.com/veler/DevToys/pull/997 At the time of writing this comment, the dev/2.0 branch uses .NET 7.

Let me know if you have any question. Feel free to come chat on this Discord server, on the DevToys channel: https://discord.gg/uwp

[sakana280]

Many thanks @veler for the detailed tips :) I've made a start on porting to v2, and wanted to say how much better the developer experience is in v2, thank you!! It now only takes 10 seconds to run (from F5 to app window open), compared to 2 minutes on v1. Hot reload works most of the time, instead of none of the time on v1. At first I was miffed by the lack of XAML but quickly got over it - the custom UI framework is easy to use so far. Also it's nice having all tool files in a single folder instead of dispersed across the project. Great work!

My progress on the v2 port, some rough edges still:

[veler]

Hi @sakana280 ,

Thanks for the feedback! I'm glad you like it 😊 We just merged this morning a change that should improve Hot Reload even more, see #998 . Here are some reasons why we made this custom UI framework is:

1. Portability and maintainability. We're not forced to stick with a certain tech for UI. We currently use Blazor (so web stack) but we can imagine a future where we use something else (WPF, Avalonia, MAUI...etc). The advantage of this strategy is that whatever change of tech stack we do, as long as it stays in .NET, existing extensions / tools will need no (or minor) changes to run.
2. In DevToys 1.0 we noticed it is hard to get external contributors to make a consistent UI with what we already made. Often, size and spacing were not consistent at all. Sometimes, contributors would add custom colors that wouldn't be tested in other themes (light, dark, high contrast). With this UI framework where you have very limited options to customize the space and colors, we ensure that UI will be more consistent across various tools in the years to come.

---

Regarding the screenshots you shared, am I understanding well that as the user input the JSON, the CSV/TSV will be copied immediately to the clipboard? If so, I would like to suggest avoiding doing so, as the user might not expect it (since he didn't do an explicit "Copy" action) and we might overwrite something important he had in his clipboard. I would suggest following a similar pattern than in other tools, when the user has to explicitly click on a "Copy" button to get the output in the clipboard.

At the moment, our IUIDataGrid doesn't support command bars at the top of it like IUIMultilineTextInput does. Therefore we can't add a "Copy CSV / TSV" button at the top of it. That's something we can add later.

In the meantime, what do you think of the following idea:

1. By default, the right panel displays a read-only IUIMultilineTextInput that shows the generated CSV / TSV / CSV French like on this website: https://csvjson.com/json2csv
2. We can use IUIMultilineTextInput.CommandBarExtraContent to display an extra "View as table" button on top of the text output. Its action would be to hide the IUIMultilineTextInput and display a IUIDataGrid instead.
3. Once I added the possibility to add a command bar on top of a IUIDataGrid (I will try to do it tonight but no promises), we can add a button "View as CSV / TSV / CSV French" (based on the user option) to switch back to the IUIMultilineTextInput.

Many thanks 😊 This is exciting!

[sakana280]

Ha ha you are one step ahead of me, I was about to start thinking of adding command buttons above the datagrid :) Same as you have described, a manual copy-to-clipboard button is what I was thinking to add, same as I have in my V1 fork. Also later I was thinking a 'paste' button above the grid to past CSV/TSV data from the clipboard, then auto convert to JSON, to give bidirectional JSON<>Table conversion. Not sure if an 'expand' button would be useful for grid too? Or does paste and expand automatically come with the IUIMultilineTextInput? I like the idea of the 'View as table' button, to flip between text and grid representation.

[veler]

Great! 😁

Regarding bi-directional, my guidance would be to either:

1. Invert the input/output dynamically, in the manner that, like in JSON <> YAML, the left text input would either accept JSON or CSV based on what the user select in the Configuration at the top of the screen. The main challenge with this particular approach is moving the IUIDataGrid from the right to the left. It will require a bit of hacking.
2. Separate it in 2 tools: a JSON to CSV, and a CSV to JSON.

Regarding the Paste and Expand buttons:

1. Paste is automatically added when IUIMultilineTextInput is Editable (not read-only) (which is by default).
2. Expand button can be added through this method: https://github.com/veler/DevToys/blob/c4e9632914b1eb89dd19abe95bc52ecfd61e1973/src/app/dev/DevToys.Api/Tool/GUI/Components/IUIMultiLineTextInput.cs#L185C5-L192C6

[veler]

Hello @sakana280,

I just wanted to let you know that I added the possibility to extend IUIDataGrid to full screen along with the possibility to add extra command bar items. Let me know if it works for you. Changes are on this commit, in dev/2.0 branch: https://github.com/veler/DevToys/commit/d7e0a7a776b85027c471b46163837cd96d115a8a

[sakana280]

Thanks @veler, your extension to IUIDataGrid made it easy to get this working. I have submitted #1003, starting with the JSON<>YAML tool as a template, hoping I followed the structure correctly.

[veler]

Thank you so much @sakana280 , I will take a look at it and continue the conversation on the pull request :-)

[veler]

@sakana280 , here is an updated UI suggestion: #1006