How to get json links data binded to longlistselector in windows phone?

Question

I have three json links. In them, one link contains category(MenuCategory) namely (starters, maindishes) and two links contain (MenuItem)some data(Itemname, Price, Picture) in it. You can see in the below image, starters and Maindishes are headers which come from one link and the items below them for starters and Maindishes comes from two different links(.../menuitems/1 and ../menuitems/2). How to get this data into longlistselector as shown in the image. I am getting the Json data into my app but i need to display them inside the LLS. How to combine them?

// http://xxxxxx.net/restaurant/category/1

// http://xxxxxx.net//restaurant/menuitems/1 // and http://xxxxxx.net/restaurant/menuitems/2

     public class MenuItem
        {
            public int Menuitemid { get; set; }
            public int Menucategoryid { get; set; }
            public string Itemname { get; set; }        
            public double Price { get; set; }
            public string Picture { get; set; }     
        }

        public class MenuCategory
        {
            public int Menucategoryid { get; set; }
            public int Menuid { get; set; }
            public string Categoryname { get; set; }
            public string Description { get; set; }
            public bool Active { get; set; }
            public string Createddate { get; set; }
            public object Modifieddate { get; set; }
        }



        public class MenuCategoryRootObject
        {
            public List<MenuCategory> data { get; set; }
        }

Answer 1

To use LongListSelector in grouping mode, you'll need to compose your data into a different form than it probably comes to your application. Ultimately, you will be binding your list control's ItemsSource to a property that can be seen as a List<List<T>> , where the outer List can be a standard List object, the inner List<T> objects should contain all the properties of your MenuCategory, and the type T should be of some class similar to MenuItem. The following class implementations should give an example of one way to implement this goal. The MenuItemModel should probably not inherit from MenuItem in your implementation, but this is just for the purposes of demonstration:

public class MenuCategoryModel : List<MenuItemModel>
{
    public MenuCategoryModel() { }

    public int Menucategoryid { get; set; }
    public int Menuid { get; set; }
    public string Categoryname { get; set; }
    public string Description { get; set; }
    public bool Active { get; set; }
    public string Createddate { get; set; }
    public object Modifieddate { get; set; }
}

public class MenuItemModel : MenuItem { }

If you are binding to a ViewModel, it would have a single property you could use as an ItemsSource for your LongListSelector, like so:

public class MyViewModel
{
    public MyViewModel() { }

    public List<MenuCategoryModel> Categories { get; set; }
}

From there, your XAML markup might look something like the following:

<phone:LongListSelector ItemsSource="{Binding Categories}"
                        IsGroupingEnabled="True">
    <phone:LongListSelector.GroupHeaderTemplate>
        <DataTemplate>
            <Grid Background="DarkSlateGray">
                <TextBlock Style="{StaticResource PhoneTextTitle3Style}"
                            Text="{Binding Categoryname}"
                            FontWeight="Bold" />
            </Grid>
        </DataTemplate>
    </phone:LongListSelector.GroupHeaderTemplate>
    <phone:LongListSelector.ItemTemplate>                   
        <DataTemplate>
            <Border Background="LightGray"
                    BorderBrush="DarkSlateGray"
                    BorderThickness="0 0 0 1">
                <StackPanel>
                    <TextBlock Style="{StaticResource PhoneTextTitle2Style}"
                                Foreground="DarkSlateGray"
                                Text="{Binding Itemname}" />
                    <TextBlock Style="{StaticResource PhoneTextTitle2Style}"
                                Foreground="DarkSlateGray"
                                Text="{Binding Price, StringFormat=C}" />
                </StackPanel>
            </Border>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

You can see the LongListSelector has IsGroupingEnabled set to true and definitions for GroupHeaderTemplate and ItemTemplate. You can even enable jump mode to allow users to tap the group headers and jump between them, but I have not demonstrated this capability here. Attached is a sample screenshot of what this implementation looks like in the designer.