如何从JSON数组中获取信息到列表和XAML中

时间:2019-11-08 10:07:07

标签: c# json api xaml xamarin

我正在使用Xamarin进行跨平台项目。现在,我陷入了API JSON数据,数据类和ListView的问题。

这是我的TideInfo类中的代码:

public class TideRoot {
    [JsonProperty("EventType")]
    public string EventType { get; set; } = string.Empty;

    [JsonProperty("DateTime")]
    public DateTime DateTime { get; set; }

    [JsonProperty("IsApproximateTime")]
    public bool IsApproximateTime { get; set; }

    [JsonProperty("Height")]
    public double Height { get; set; }

    [JsonProperty("IsApproximateHeight")]
    public bool IsApproximateHeight { get; set; }

    [JsonProperty("Filtered")]
    public bool Filtered { get; set; }

    [JsonIgnore]
    public string DisplayTide => $"Height: {EventType ?? string.Empty}, {Height}";


}

public class TideRootList {
    public List<TideRoot> ListItem { get; set; } }

我使用json2csharp来获取TideRoot列表,并添加了DisplayTide,因此我可以在列表中同时显示EventType和Height。最近,我添加了TideRootList以获取有关潮汐7天信息的列表。

这是JSON文件:

[{
  "EventType": "LowWater",
  "DateTime": "2019-11-08T01:32:00",
  "IsApproximateTime": false,
  "Height": 1.8388111705145762,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-08T08:56:00",
  "IsApproximateTime": false,
  "Height": 4.2101062451792144,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-08T14:03:00",
  "IsApproximateTime": false,
  "Height": 1.7989273407141986,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-08T21:04:00",
  "IsApproximateTime": false,
  "Height": 4.070738079705702,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-09T02:16:00",
  "IsApproximateTime": false,
  "Height": 1.6184884034712226,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-09T09:34:00",
  "IsApproximateTime": false,
  "Height": 4.4085443850273309,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-09T14:44:00",
  "IsApproximateTime": false,
  "Height": 1.5501832117158008,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-09T21:44:00",
  "IsApproximateTime": false,
  "Height": 4.2701942634884968,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-10T02:56:00",
  "IsApproximateTime": false,
  "Height": 1.4077035385806112,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-10T10:09:00",
  "IsApproximateTime": false,
  "Height": 4.5597566246677248,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-10T15:20:00",
  "IsApproximateTime": false,
  "Height": 1.33459759647378,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-10T22:21:00",
  "IsApproximateTime": false,
  "Height": 4.4226776330873276,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-11T03:32:00",
  "IsApproximateTime": false,
  "Height": 1.2396397924330329,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-11T10:44:00",
  "IsApproximateTime": false,
  "Height": 4.6557658698506978,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-11T15:55:00",
  "IsApproximateTime": false,
  "Height": 1.1711223007079854,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-11T22:57:00",
  "IsApproximateTime": false,
  "Height": 4.5263662430387752,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-12T04:08:00",
  "IsApproximateTime": false,
  "Height": 1.1263357912996472,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-12T11:17:00",
  "IsApproximateTime": false,
  "Height": 4.7038380223666625,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-12T16:29:00",
  "IsApproximateTime": false,
  "Height": 1.0599435514996523,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-12T23:29:00",
  "IsApproximateTime": false,
  "Height": 4.5937485679887731,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-13T04:42:00",
  "IsApproximateTime": false,
  "Height": 1.0650050994934075,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-13T11:48:00",
  "IsApproximateTime": false,
  "Height": 4.7189203663268842,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-13T17:02:00",
  "IsApproximateTime": false,
  "Height": 0.99227216956188025,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-14T00:00:00",
  "IsApproximateTime": false,
  "Height": 4.6379169444371362,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-14T05:17:00",
  "IsApproximateTime": false,
  "Height": 1.0460921771289937,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "HighWater",
  "DateTime": "2019-11-14T12:17:00",
  "IsApproximateTime": false,
  "Height": 4.7116384452230751,
  "IsApproximateHeight": false,
  "Filtered": false
}, {
  "EventType": "LowWater",
  "DateTime": "2019-11-14T17:36:00",
  "IsApproximateTime": false,
  "Height": 0.9624477944154356,
  "IsApproximateHeight": false,
  "Filtered": false
}]

这就是我处理API的方式:

public async Task<TideRootList> GetTideInfo(string id, string duration)
        {
            using (var client = new HttpClient())
            {
                // Request headers
                client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "223604c97163487bb857cfb554c96c90");

                var url = string.Format(TideInfo, id, duration);
                var json = await client.GetStringAsync(url);

                if (string.IsNullOrWhiteSpace(json))
                    return null;

                json.Replace("[", "").Replace("]", "");

                //deserialize the array into a list of Result objects, and take the object at index zero.
                var result = JsonConvert.DeserializeObject<List<TideRootList>>(json);
                return result[0];
            }

        }

最后一部分是执行API方法并将信息提供给XAML的viewModel。两者都在这里:

TideRootList tidelist;
        public TideRootList TideList
        {
            get { return tidelist; }
            set { tidelist = value; OnPropertyChanged(); }
        }


 TideList = await WeatherService.GetTideInfo("0065", "7");

还有XAML:

<StackLayout Padding="10" Spacing="10">
            <ListView ItemsSource="{Binding TideRootList.ListItem}"
              HasUnevenRows="True"
              CachingStrategy="RecycleElement"
              IsPullToRefreshEnabled="True"
              RefreshCommand="{Binding GetWeatherCommand}"
              IsRefreshing="{Binding IsBusy, Mode=OneWay}"
              RowHeight="66"
              x:Name="ListViewTide">
                <ListView.SeparatorColor>
                    <OnPlatform x:TypeArguments="Color" iOS="Transparent"/>
                </ListView.SeparatorColor>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" Padding="10,0,0,0">
                                <StackLayout Padding="10" Spacing="5">
                                    <Label Text="{Binding DisplayTide}"
                                   TextColor="#3498db"
                                           FontAttributes="Bold"
                                   Style="{DynamicResource ListItemTextStyle}"/>
                                    <Label Text="{Binding DisplayTide}" 
                                   Style="{DynamicResource ListItemDetailTextStyle}"/>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>

经过许多不同的测试后,我无法在应用程序上显示DisplayTide,它只是一个空白。请告诉我我所缺少的。谢谢。

1 个答案:

答案 0 :(得分:1)

您在ListView.ItemsSource的bindind路径上错了。

应为TideList.ListItem

其他建议

使用json反序列化时无需删除括号,您可以直接获取列表。

public async Task<List<TideRoot>> GetTideInfo(string id, string duration)
    {
        using (var client = new HttpClient())
        {
            // Request headers
            client.DefaultRequestHeaders.Add("Ocp-Apim-Subscription-Key", "223604c97163487bb857cfb554c96c90");

            var url = string.Format(TideInfo, id, duration);
            var json = await client.GetStringAsync(url);

            if (string.IsNullOrWhiteSpace(json))
                return null;

            //deserialize the array into a list of Result objects, and take the object at index zero.
            var result = JsonConvert.DeserializeObject<List<TideRoot>>(json);
            return result;
        }

    }

  //in model
  List<TideRoot> tidelist;
  public List<TideRoot> TideList
  {
      get { return tidelist; }
      set { tidelist = value; OnPropertyChanged(); }
  }
  TideList = await WeatherService.GetTideInfo("0065", "7");


  //xaml
  <ListView ItemsSource="{Binding TideList}"