Как получить информацию из массива JSON в список и в XAML - PullRequest
Новая
       5

Как получить информацию из массива JSON в список и в XAML

1 голос
/ 08 ноября 2019

Я делаю кроссплатформенный проект с использованием 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. Оба здесь: 

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 голосов
/ 08 ноября 2019

Вы ошиблись на пути привязки ListView.ItemsSource.

Это должно быть 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}"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...