在 ListView (Xamarin.Forms, C#) 中显示嵌套的 JSON 数据

Question

I have a problem that I can not solve, I hope you help me.

In my Xamarin.Forms application I am downloading JSON data which I would like to display in ListView.

JSON nasted data looks like this:

{
  "devices": [
    {
      "id": 2,
      "name": "device1",
      "owner": {
        "owner_id": 10,
        "owner_surname": "XYZ"
      }
    },
    {
      "id": 3,
      "name": "device3",
      "owner": {
        "owner_id": 12,
        "owner_surname": "XVB"
      }
    }
  ]
}

I have such classes for these data:

public class Items
{
    public List<Device> devices { get; set; }
}
public class Device
{
    public int id { get; set; }
    public string name { get; set; }
    public Owner owner { get; set; }
}
public class Owner
{
    public int owner_id { get; set; }
    public string owner_surname { get; set; }
}

This is my MainPage.xaml.cs file:

var client = new WebClient();
client2.Headers.Add("Accept", "application/json");
var content = client.DownloadString(Url);
var tr = JsonConvert.DeserializeObject<List<Items>>(content);
ObservableCollection<Items> trends = new ObservableCollection<Items>(tr);
myList.ItemsSource = trends;

And this is my ListView in XAML:

<ListView x:Name="myList" HasUnevenRows="true" ItemsSource="{Binding devices}">
    <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <Label Text="{Binding name}" TextColor="Black" FontAttributes="Bold"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
</ListView>

This code does not display anything (white screen). I would like to display the "name" from the first level of nesting and the "owner_surname" from the second level of nesting. application built on the basis of: https://www.codementor.io/lutaayahuzaifahidris/xamarin-forms-simple-list-of-items-with-offline-capability-cross-platform-app-btyq0bihv Other responses to stackoverflow did not work :(

Answer 1

First of all, please add a breakpoint to var tr = JsonConvert.DeserializeObject<List<Items>>(content);check you can get the json data from the url, If you can get the result from the Url.

You set the two ItemsSource for the listview(please set one of them).

<ListView x:Name="myList" HasUnevenRows="true" ItemsSource="{Binding devices}"> and myList.ItemsSource = trends;

I used your code(You did not provide url, I have to put the json data to the txt file, then read it). I can get the result in the listview.

Notice I set the myList.ItemsSource = tr.devices; If you just set the myList.ItemsSource =trends , You can not bind the name in the listview.

And I cannot DeserializeObject to List directly, it will get an exception, var tr = JsonConvert.DeserializeObject<List<Items>>(content);

I just could be DeserializeObject with this line. var tr = JsonConvert.DeserializeObject<Items>(text);

There is my listview code.

   <StackLayout>
    <!-- Place new controls here -->
    <ListView x:Name="myList" HasUnevenRows="true" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <Label Text="{Binding name}" TextColor="Black" FontAttributes="Bold"/>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

Answer 2

{
  "devices": [
    {
      "id": 2,
      "name": "device1",
      "owner": {
        "owner_id": 10,
        "owner_surname": "XYZ"
      }
    },
    {
      "id": 3,
      "name": "device3",
      "owner": {
        "owner_id": 12,
        "owner_surname": "XVB"
      }
    }
  ]
}

Nested JSON is as a result of relationship among models eg device model is related to owner model, thus calling device model will cascade to the related models.
To access specific properties of related models use dot(.) operator:

<label Text="{Binding Owner.owner_id}"/> 

this will give 12... hence accessing even a deeper nested json would be basemodel.property(A).property(B).property(c) ...etc