How to display JSON in WPF TreeView - json

Question

I am reading in JSON and then displaying it in a WPF treeview.
Here is the code...
Class MainWindow
Public Sub New()
InitializeComponent()
Dim dic = GetThreadedObject(GetJASN())("phases")
Dim items = dic(0)
tView.ItemsSource = items
End Sub
Private Function GetJASN() As String
Dim output As String = My.Computer.FileSystem.ReadAllText(My.Application.Info.DirectoryPath & "\UAL525 Phase of Flight.json")
Return output
End Function
Private Function GetThreadedObject(JASN As String)
Dim Js As New JavaScriptSerializer()
Js.MaxJsonLength = JASN.Length * 2
Dim j = Js.Deserialize(Of Object)(JASN)
Return j
End Function
End Class
And the WPF...
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TreeView x:Name="tView">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Value}" >
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Red"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
<TextBlock Text="{Binding Key}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Grid>
Start and End points (above) look fine (presumably because they contain child elements to display).
But the Phase element should just contain one value. A single string that reads "GROUND". But it is broken up into a charArray for some reason. And displayed in multiple elements as shown above.
So what is the key to fixing this? Multiple data templates that display a string differently from other objects?

Answer 1

Here is the code Rekshino submitted, in Vb.
Imports System.Globalization
Public Class ValConv
Implements IValueConverter
Private Function IValueConverter_Convert(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.Convert
If (TypeOf value Is String) Then
Dim newStr As New List(Of String)
newStr.Add(value)
Return newStr
Else
Return value
End If
End Function
Private Function IValueConverter_ConvertBack(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
Return value
End Function
End Class
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp2"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<local:ValConv x:Key="valConv"/>
</Window.Resources>
<Grid>
<TreeView x:Name="tView">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Value, Converter={StaticResource valConv}}" >
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Red"/>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
<TextBlock Text="{Binding Key}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Grid>

Answer 2

The problem is that your XAML can only show a collections in dictionary's value and if there is a string, then it will be considered as collection of characters. One of the quick sollutions is to create a converter, which will transform your strings into string collections.
For this you need a value converter(sorry I do code in c#)
public class ValConv : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is string str)
{
return new List<string> { str };
}
return value;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return value;
}
}
Instantiate this converter in resources:
<Window.Resources>
<local:ValConv x:Key="valKonv"/>
</Window.Resources>
and use it:
<HierarchicalDataTemplate ItemsSource="{Binding Value, Converter={StaticResource valConv}}" >

Answer 3

I needed a more generic operation to consume any JSON.
This code uses the nuget Newtonsoft JSON to do the magic of taking any raw JSON (without models) and loading it into a TreeView which looks like this:
JSON
string jsonString = #"[{""BatchId"":0,""AccessionChanges"":[{""LabId"":8675309,""InstanceChanges"":[{""Property"":""Note"",""ChangedTo"":""Jabberwocky"",""UniqueId"":null,""SummaryInstance"":null},{""Property"":""Instrument"",""ChangedTo"":""instrumented"",""UniqueId"":null,""SummaryInstance"":null}],""DetailChanges"":[{""Property"":""Comments"",""ChangedTo"":""2nd Comment"",""UniqueId"":null,""SummaryInstance"":null},{""Property"":""CCC"",""ChangedTo"":""XR71"",""UniqueId"":null,""SummaryInstance"":null}]}]}]";
Xaml <TreeView x:Name="tView" />
Codbehind Xaml
InitializeComponent();
try
{
tView.Items.Add(JSONOperation.Json2Tree(JArray.Parse(jsonString), "Root"));
}
catch (JsonReaderException jre)
{
MessageBox.Show($"Invalid Json {jre.Message}");
}
public static class JSONOperation
public static TreeViewItem Json2Tree(JToken root, string rootName = "")
{
var parent = new TreeViewItem() { Header = rootName };
foreach (JToken obj in root)
foreach (KeyValuePair<string, JToken> token in (JObject)obj)
switch (token.Value.Type)
{
case JTokenType.Array:
var jArray = token.Value as JArray;
if (jArray?.Any() ?? false)
parent.Items.Add(Json2Tree(token.Value as JArray, token.Key));
else
parent.Items.Add($"\x22{token.Key}\x22 : [ ]"); // Empty array
break;
case JTokenType.Object:
parent.Items.Add(Json2Tree((JObject)token.Value, token.Key));
break;
default:
parent.Items.Add(GetChild(token));
break;
}
return parent;
}
private static TreeViewItem GetChild(KeyValuePair<string, JToken> token)
{
var value = token.Value.ToString();
var outputValue = string.IsNullOrEmpty(value) ? "null" : value;
return new TreeViewItem() { Header = $" \x22{token.Key}\x22 : \x22{outputValue}\x22"};
}