ListView in Xamarin using RestApi

user_9806164 0
Viewed 2453

I'm enable to solve this error. I wanted to display ListView of API data which is in large amount.

For example API contains this type of data :

[{"id":"666","employee_name":"xyz","employee_salary":"123","employee_age":"23","profile_image":""}]

Error screenshot: screenshot of error

Class.cs which i made after converting JSON to c#

 public class employees
    {

        public string id { get; set; }
        public string employee_name { get; set; }
        public string employee_salary { get; set; }
        public string employee_age { get; set; }
        public string profile_image { get; set; }

    }

This is the XAML.cs file where LoadData() is using for calling API

public async void LoadData()
        {
            var content = "";
            HttpClient client = new HttpClient();
            var RestURL = "MY API";  
            client.BaseAddress = new Uri(RestURL);
            client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = await client.GetAsync(RestURL);
            content = await response.Content.ReadAsStringAsync();
            var Items = JsonConvert.DeserializeObject<List<employees>>(content);
            ListView1.ItemsSource = Items;
        }

This is the XAML file of Xamarin.Forms:

<StackLayout BackgroundColor="White">
        <ListView x:Name="ListView1" RowHeight="60">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Vertical" Padding="8,0,8,0">
                            <Label Text="{Binding id}" TextColor="#000" FontSize="14" LineBreakMode="TailTruncation" />
                            <Label Text="{Binding employee_name}" TextColor="#000" LineBreakMode="TailTruncation" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
xamarin.forms api listview cross-platform json
2 Answers

First need to create a local model class :

public class TodoItem
{
    public string id { get; set; }

    public string employee_name { get; set; }

    public string employee_salary{ get; set; }

    public bool employee_age { get; set; }

    public bool profile_image { get; set; }
}

And in the RestService can use TodoItem:

public List<TodoItem> Items { get; private set; }

public async Task<List<TodoItem>> RefreshDataAsync ()
{
   Items = new List<TodoItem> ();
 // RestUrl = http://developer.xamarin.com:8081/api/todoitems
   var uri = new Uri (string.Format (Constants.RestUrl, string.Empty));
   try {
       var response = await client.GetAsync (uri);
       if (response.IsSuccessStatusCode) {
           var content = await response.Content.ReadAsStringAsync ();
           Items = JsonConvert.DeserializeObject <List<TodoItem>> (content);
        }
    } catch (Exception ex) {
           Debug.WriteLine (@"ERROR {0}", ex.Message);
    }
    return Items;
}

And last where your listview itemsource can set as follow:

listView.ItemsSource = await RestService.RefreshDataAsync();

Note: Here is a official sample you can refer to.

I'm enable to solve this error, i wanted to display listview of API data which is in large amount

Showing large data in listview,here is a paging show method.After getting API data, saving them in local CacheListData.Not directly set it to listView.ItemsSource .And you need create a ItemListData to add data from CacheListData.Which the count of added data according to you once want to show.When listview scroll to bottom ,then show Add More Swipe method to reload next page data.

Generally, Solution is to cache lagre data to local first.Then get data a little by page to show.Here is a solution link can refer to.

user_105047960

You are using the wrong endpoint, you should use this one, to retrieve a list of employees

 var RestURL = "http://dummy.restapiexample.com/api/v1/employees/";

You can check the API documentation

user_16919800
Related