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.

image

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:

image

In MainPage.xaml, we add the two textboxes, one for the minified JSON and the other for the processed JSON:

[sourcecode language=”xml”]
<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 &gt;&gt;" Margin="5" />
<Button Width="85" Height="40" Content="&lt;&lt; Minify" Margin="5" />
</StackPanel>
<TextBox x:Name="FormBox" Margin="5" Grid.Column="2" AcceptsReturn="True" TextWrapping="Wrap"/>
</Grid>
[/sourcecode]

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:

[sourcecode language=”xml”]
<Button Width="90" Height="40" Content="Format &gt;&gt;"  Margin="5" Click="FormatJsonClick"/>
[/sourcecode]

Select the Click event handler and press F12 to create the event handler in code and type this code:

[sourcecode language=”csharp”]
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($&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;Error parsing JSON: {ex.Message}&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;).ShowAsync();
}
}
[/sourcecode]

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:

[sourcecode language=”csharp”]
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($&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;Error parsing JSON: {ex.Message}&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;).ShowAsync();
}
}
[/sourcecode]

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.

image

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