I have 2 json files, 1 with categories and one with products. How do I bind the data so when I click on for example fashion it shows me only the products within that category. The jsons are not local and I have 2 classes, I cannot touch them because it is part of my requirement to use them as they are.
These are my classes
public class Category
{
public string Name { get; set; }
public string Parent{ get; set; }
}
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public string Brand { get; set; }
public List<string> Category { get; set; }
public double Price { get; set; }
public string Picture { get; set; }
public string Description { get; set; }
}
}
The category JSON
[
{
"Name": "Beauty",
"Parent": "All categories"
},
{
"Name": "Clothing, Shoes & Accessories",
"Parent": "All categories"
},
{
"Name": "Home",
"Parent": "All categories"
},
{
"Name": "Makeup",
"Parent": "Beauty"
},
{
"Name": "Accessories",
"Parent": "Clothing, Shoes & Accessories"
},
{
"Name": "Bath",
"Parent": "Home"
},
{
"Name": "Furniture",
"Parent": "Home"
},
{
"Name": "Home Decor",
"Parent": "Home"
},
{
"Name": "Home Textiles",
"Parent": "Home"
}
]
The product JSON
[
{
"Id": "000e3c3514c8e80bc12c7cde4f4a341c",
"Name": "Animal Shape Storage Stool",
"Brand": "Carl Artbay Stools",
"Category": ["Furniture"],
"Price": 276.76,
"Picture": "https://images-na.ssl-images-amazon.com/images/I/41+E9X7AFUL._.jpg",
"Description": "This Storage Ottoman Is Finely Crafted With Superior Faux Leather & Quality Mdf, The After-set-up Construction Is Sturdy & Solid, Decorative Appearance Matches Your Interior Decor & Furniture. It Can Be Used As: Storage Chest/Trunk Sundries Finally Has Somewhere To Go, No Matter Blankets, Cushions, Clothes, Or Remotes, Books... An Easy Solution To Organize Your Working And Living environment. It Is Sturdy As A Bench To Be Placed At The Entrance Or closet. You May Sit On It To Put On Or Take Off Your shoes. Tired After Whole days' Work? Here Comes A Nice Place To Rest Your Feet On While Sitting On couch. Puppies May Use It To Step Onto Your Bed Or Watch Out Of The window. With Ottoman Tray, It Becomes An Ottoman Coffee Table To Place Drinks Or foods. We Have A Variety Of Folding Storage Ottomans In Size And Color, Simply Search Storage Ottoman To Find more. Specifications: - Upholstery Material: Faux Leather/Pluch/Wood - Seater Filling Material: High Resilence Sponge - Product Size: - Product Weight: 6kg. Package Contents: - 1 X Folding Storage Ottoman."
},
{
"Id": "2e41a5597d493e63b5cfb43071008f75",
"Name": "Coffee Stool with Backrest",
"Brand": "Amadon",
"Category": ["Furniture"],
"Price": 156.71,
"Picture": "https://images-na.ssl-images-amazon.com/images/I/31sciL4h0gL._.jpg",
"Description": "Your support is our greatest motivation, welcome to buy! Product Name: Bar Chair. Color: light gray, dark black, orange. Product category: Dining chair Applicable occasions: hotel, bar, restaurant, living room. Applicable age: adult. Material: Fabric Iron. Internal filler: high elastic foam sponge. Style: European. Frame: metal skeleton. According to the ergonomic design, the L-shape fits the back curve and relieves fatigue to the lumbar support. Note: Due to differences between the different displays, the image may not reflect the actual color of the project. If you have any questions or problems, please feel free to contact us by email and we will get back to you within 24 hours."
}, ........
How I extract them
protected override void OnStart()
{
string s = "[]";
WebRequest request = WebRequest.Create(
"https://personalpages.manchester.ac.uk/staff/grigory.pishchulov/Categories.json");
WebResponse response = request.GetResponse();
using (Stream stream = response.GetResponseStream())
using (StreamReader reader = new StreamReader(stream))
{
s = reader.ReadToEnd();
}
categories = JsonConvert.DeserializeObject<Category[]>(s);
string s1 = "[]";
WebRequest request1 = WebRequest.Create(
"https://personalpages.manchester.ac.uk/staff/grigory.pishchulov/Products.json");
WebResponse response1 = request1.GetResponse();
using (Stream stream1 = response1.GetResponseStream())
using (StreamReader reader1 = new StreamReader(stream1))
{
s1 = reader1.ReadToEnd();
}
products = JsonConvert.DeserializeObject<Product[]>(s1);
}
The category page layout
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="coursework.ShoppingPage" Title="All categories">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ListView2" RowHeight="100" VerticalOptions="CenterAndExpand" ItemTapped="ListView2_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
The product page layout
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="coursework.Products" Title="Products">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ListView3" ItemSelected="ListView3_ItemSelected" RowHeight="100" VerticalOptions="CenterAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="80" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Picture}" VerticalOptions="Fill" HorizontalOptions="Center" Grid.Row="1" />
<Label Text="{Binding Name}" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Grid.Row="1"/>
<Label Text="{Binding Price}" Grid.Column="2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Grid.Row="1" FontAttributes="Bold" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
And I get the data from the classes in the cs pages with
ListView.ItemsSource = App.categories/products;
CodePudding user response：
I assume you are already passing the selected category to the product page
if so, you can use LINQ to select just the matching products
// cat is a string containing the selected category
ListView.ItemsSource = App.products.Where(p => p.Categories.Contains(cat)).ToList();