Nowadays it’s very common to receive JSON data from many sources and to process it in our programs. I have the same problem and, sometimes, I also have to debug the received data to see what’s coming from the server. Many times, the data is minimized and it’s very difficult to analyze what’s coming. On the other side, I have formatted JSON data and want to save space, minimizing it.
You can go to online sites (just do a search for “json formatter” in your preferred search engine) and format the JSON data, to get the formatted output.
But, as a developer, I wanted to create a program that does that. So I decided to create a Windows UWP program to process the JSON data.
The first step is to create a UWP program in Visual Studio:
In MainPage.xaml, we add the two textboxes, one for the minified JSON and the other for the processed JSON:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="\*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="\*"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="MiniBox" Margin="5" AcceptsReturn="True" TextWrapping="Wrap"/>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<Button Width="85" Height="40" Content="Format >>" Margin="5" />
<Button Width="85" Height="40" Content="<< Minify" Margin="5" />
</StackPanel>
<TextBox x:Name="FormBox" Margin="5" Grid.Column="2" AcceptsReturn="True" TextWrapping="Wrap"/>
</Grid>
To process the JSON data, we use the Newtonsoft Json.NET library (http://www.newtonsoft.com/json). We can add it using NuGet. In the Solution Explorer, right click in References and select “Manage NuGet packages” and add the library Newtonsoft.Json.
Then, in MainPage.xaml, add the handler for the Click handler for the Format button:
<Button Width="90" Height="40" Content="Format >>" Margin="5" Click="FormatJsonClick"/>
Select the Click event handler and press F12 to create the event handler in code and type this code:
private async void FormatJsonClick(object sender, RoutedEventArgs e)
{
try
{
if (!string.IsNullOrWhiteSpace(MiniBox.Text))
{
FormBox.Text = JsonConvert.SerializeObject(
JsonConvert.DeserializeObject(MiniBox.Text), Formatting.Indented);
}
}
catch (JsonReaderException ex)
{
await new MessageDialog("Error parsing JSON: {ex.Message}").ShowAsync();
}
}
We are using two functions of the library to format the data: DeserializeObject, to transform the string into an object and then SerializeObject to transform the object into a string again. This time, we use the Formatting.Indented to format the result and add it to the destination box. To minify the JSON, you must use the same procedure, but use Formatting.None:
private async void MinifyJsonClick(object sender, RoutedEventArgs e)
{
try
{
if (!string.IsNullOrWhiteSpace(FormBox.Text))
{
MiniBox.Text = JsonConvert.SerializeObject(
JsonConvert.DeserializeObject(FormBox.Text), Formatting.None);
}
}
catch (JsonReaderException ex)
{
await new MessageDialog("Error parsing JSON: {ex.Message}").ShowAsync();
}
}
If you run the program and paste some JSON into the first box and click Format, the formatted JSON is shown in the second box.
If you want to reverse the process, just click on the Minify button.
Easy, no? Just one line of code and you have a Minifier/Formatter for JSON data.
If you want to take a look at the source code for the project, you can go to https://github.com/bsonnino/ProcessJson
Hi Bruno,
This solves my problem. I was looking at mutiple example of converting the string JSON into formatted json to display on HTML page. I tried couple of example but non of them works for me. This is exactly what i was looking for.
Thanks for the example.
In Visual Studio if you want to convert JSON into C# Class, You can also navigate to File-> new -> Paste special -> JSON as Class
For formatting also check
https://www.minify-beautify.com/json-formatter-online
Thanks
Yes, I know that. I will publish soon a post that uses this feature to convert XML to Json