Deserializing a JSON array to LongListSelector Windows Phone 8 - windows-phone-7

Question

How can i deserialize this jsonx variable and put it on a longlistselector on windows phone?
Currently i can only echo one string with messagebox. i need key-value sets on a longlistselector.
edit: this is my answer http://pastebin.com/CcADHaab
here is my code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneApp5.Resources;
using Newtonsoft.Json;
namespace PhoneApp5
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
string json = #"{
'Email': 'james#example.com',
'Active': true,
'CreatedDate': '2013-01-20T00:00:00Z'
}";
string jsonx = #"{
'Table1': [
{
'id': 0,
'item': 'item 0'
},
{
'id': 1,
'item': 'item 1'
}
]
}";
Account account = JsonConvert.DeserializeObject<Account>(json);
// Console.WriteLine(account.Email);
// james#example.com
MessageBox.Show(account.Email);
list.ItemsSource = new BookList();
}
}
public class BookList : List<Account>
{
public BookList()
{
}
}
public class Account
{
public string Email { get; set; }
public bool Active { get; set; }
public DateTime CreatedDate { get; set; }
// public IList<string> Roles { get; set; }
}
///////////////////////////
}
and my XAML
<phone:PhoneApplicationPage
x:Class="PhoneApp5.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector Name="list">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding id}" />
<TextBlock Text=" ( " />
<TextBlock Text="{Binding item}" FontStyle="Italic" />
<TextBlock Text=" )" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
</phone:PhoneApplicationPage>

Answer 1

You need a class to represent your json:
public class MyClass
{
public string Id { get; set; }
public string Item { get; set; }
}
Set a ObservableCollection property in your Form:
public ObservableCollection<MyClass> MyClassCollection { get; set; }
and then set the MyClassCollection property to your Deserialized json
MyClassCollection = JsonConvert.DeserializeObject<ObservableCollection<MyClass>>(e.Result);
That way you're binding your class list to the LongListSelector Control in your XAML:
<phone:LongListSelector Name="list" ItemsSource="{Binding MyClassCollection}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding id}" />
<TextBlock Text=" ( " />
<TextBlock Text="{Binding item}" FontStyle="Italic" />
<TextBlock Text=" )" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
That should work.