Lazy Load JSON Data in Xamarin.Forms ListView: An Overview
Tags: dotnet, csharp, xamarin, mobile
Published: 2022-08-23 12:45:40

---
title: Lazy Load JSON Data in Xamarin.Forms ListView: An Overview
published: true
date: 2022-08-23 11:08:40 UTC
tags: dotnet, csharp, xamarin, mobile
canonical_url: https://www.syncfusion.com/blogs/post/lazy-load-json-data-in-xamarin-forms-listview-an-overview.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxd10gys5vaj16t4g6js.png
---

[Lazy loading](https://en.wikipedia.org/wiki/Lazy_loading "Wikipedia page for Lazy loading"), or on-demand loading, is a technique that enhances loading performance. With it, we can show a fixed amount of data in the initial loading of a huge data set. Once the user has scrolled to the end of that data, we can add more to the end of the list until the data ends. It is also known as infinite scrolling or incremental loading.

The Syncfusion [Xamarin.Forms ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview "Xamarin.Forms ListView") (SfListView) control is a list-like interface. It can render a set of data items vertically or horizontally in a linear or grid structure. It also provides lazy loading support with a Load More feature. You can enable lazy loading both manually and automatically.

This blog teaches you how to show a fixed amount of [JSON](https://en.wikipedia.org/wiki/JSON "Wikipedia page for JSON") data on initial loading (lazy load) and show a busy indicator while loading the remaining data on scrolling in the Xamarin.Forms ListView.

## Populate JSON data collection from a URI

Follow these steps to populate a JSON data collection from a URI:

**Step 1** : Install the [**Newtonsoft.Json**](https://www.nuget.org/packages/Newtonsoft.Json/ "Newtonsoft.Json NuGet package") NuGet package to your Xamarin.Forms shared project.

**Step 2** : Then, download the JSON data from your **URI** using the **HttpClient** method and store it in the local file.

```csharp
public async Task<bool> DownloadJsonAsync()
{
  try
  {
    var url = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; //Set your REST API url here
 
    //Sends a request to retrieve data from the web service for the specified Uri
    var response = await httpClient.GetAsync(url);
    using (var stream = await response.Content.ReadAsStreamAsync()) //Reads data as stream
    {
      //Gets the path to the specified folder
      var localFolder = System.Environment.GetFolderPath(System.Environment.SpecialFolder.LocalApplicationData);
 
      var newpath = Path.Combine(localFolder, "Data.json"); // Combine path with the file name
 
      var fileInfo = new FileInfo(newpath);
      File.WriteAllText(newpath, String.Empty);
 
      //Creates a write-only file stream
      using (var fileStream = fileInfo.OpenWrite())
      {
         await stream.CopyToAsync(fileStream); //Reads data from the current stream and write to destination stream (fileStream)
      }
    }
  }
  catch (OperationCanceledException e)
  {
     System.Diagnostics.Debug.WriteLine(@"ERROR {0}", e.Message);
     return false;
  }
  catch (Exception e)
  {
     System.Diagnostics.Debug.WriteLine(@"ERROR {0}", e.Message);
     return false;
  }
  return true;
}
```

**Step 3:** Now you can get the JSON data as a list of dynamic objects. Refer to the following code example.

```csharp
private async void GetDataAsync()
{
  isDownloaded = await DataService.DownloadJsonAsync();
  if (isDownloaded)
  {
    var localFolder = Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData);
    var fileText = File.ReadAllText(Path.Combine(localFolder, "Data.json"));
 
    //Read data from the local path and set it to the collection bound to the ListView.
    JSONCollection = JsonConvert.DeserializeObject<IList<dynamic>>(fileText);
    totalItems = JSONCollection.Count;
  }
}
```

The [LoadMoreCommand](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_LoadMoreCommand "LoadMoreCommand property of Xamarin ListView") property gradually uses the JSON data collection to load the items on demand. As I said before, we can lazy load the data either manually or automatically in the Xamarin.Forms ListView.

Let’s see how to achieve this with code examples!

## Lazy loading JSON data manually in Xamarin.Forms ListView

To load more items manually in the ListView, set the [LoadMoreOption](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_LoadMoreOption "LoadMoreOption property of Xamarin ListView") as **Manual** using the [LoadMoreCommand](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_LoadMoreCommand "LoadMoreCommand property of Xamarin ListView") and [LoadMoreCommandParameter](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_LoadMoreCommandParameter "LoadMoreCommandParameter property of Xamarin ListView") properties. Doing this will load more items on tapping the Load More button at the end of the list.

Refer to the following code example to bind the **ViewModel**. **LoadMoreItemsCommand** to the Xamarin.Forms ListView.

```xml
<syncfusion:SfListView x:Name="listView"
                         ItemSize="{OnPlatform Android=115, Default=100}"
                         ItemsSource="{Binding Items}"
                         LoadMoreOption="Auto"
                         LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                         IsBusy="{Binding IsBusy}"
                         ItemSpacing="5"
                         LoadMoreCommandParameter="{Binding Source={x:Reference Name=listView}}">
```

Refer to the following code definition for **LoadMoreItemsCommand** in the **ViewModel**.

```csharp
private bool CanLoadMoreItems(object obj)
{
  if (Items.Count >= totalItems)
  return false;
  return true;
}
 
private async void LoadMoreItems(object obj)
{
   var listview = obj as SfListView;
   try
   {
      IsBusy = true;
      await Task.Delay(1000);
      var index = Items.Count;
      var count = index + 3 >= totalItems ? totalItems - index : 3;
      AddProducts(index, count);
   }
   catch
   {
 
   }
   finally
   {
      IsBusy = false;
   }
}
 
private void AddProducts(int index, int count)
{
  for (int i = index; i < index + count; i++)
  {
     Items.Add(JSONCollection[i]);
  }
}
```

After executing the above code example, we will get the output like in the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Lazy-Loading-JSON-Data-in-Xamarin.Forms-ListView-Manually-with-a-Load-More-Button-1.gif" alt="Lazy Loading JSON Data in Xamarin.Forms ListView Manually with a Load More Button" style="width:100%">

  <figcaption>Lazy Loading JSON Data in Xamarin.Forms ListView Manually with a Load More Button</figcaption>

</figure>



## Lazy loading JSON data automatically in Xamarin.Forms ListView

To load more items automatically in the ListView, set the [LoadMoreOption](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_LoadMoreOption "LoadMoreOption property of Xamarin ListView") as **Auto** using the [LoadMoreCommand](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_LoadMoreCommand "LoadMoreCommand property of Xamarin ListView") and [LoadMoreCommandParameter](https://help.syncfusion.com/cr/xamarin/Syncfusion.ListView.XForms.SfListView.html#Syncfusion_ListView_XForms_SfListView_LoadMoreCommandParameter "LoadMoreCommandParameter property of Xamarin ListView") properties. This will load more items when the scrollbar reaches the end of the list.

Refer to the following code example.

```xml
<syncfusion:SfListView x:Name="listView"
                         ItemSize="{OnPlatform Android=105, Default=100}"
                         ItemsSource="{Binding Items}"
                         LoadMoreOption="Auto"
                         LoadMoreCommand="{Binding LoadMoreItemsCommand}"
                         IsBusy="{Binding IsBusy}"
                         ScrollBarVisibility="Always"
                         LoadMoreCommandParameter="{Binding Source={x:Reference Name=listView}}"/>
```

After executing the above code example, we will get the output like in the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Lazy-Loading-JSON-Data-in-Xamarin.Forms-ListView-Automatically-1.gif" alt="Lazy Loading JSON Data in Xamarin.Forms ListView Automatically" style="width:100%">

  <figcaption>Lazy Loading JSON Data in Xamarin.Forms ListView Automatically</figcaption>

</figure>



## GitHub reference

Refer to the complete example for [lazy loading JSON data in Xamarin.Forms ListView on GitHub](https://github.com/SyncfusionExamples/lazy-loading-json-data-to-listview-xamarin-forms "Lazy loading JSON data in Xamarin ListView GitHub demo").

## Conclusion

Thanks for reading! We have seen how to lazy load JSON data in the Syncfusion [Xamarin.Forms ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview "Xamarin.Forms ListView"). For more details, refer to the [load more feature in Xamarin ListView documentation](https://help.syncfusion.com/xamarin/listview/loadmore "Load more feature in Xamarin ListView documentation"). Try out the steps in this blog and easily enhance your loading performance. Don’t forget to leave your feedback in the comments section below!

For current customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/pdf "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [View PDF Annotations as a List and Navigate Using Xamarin.Forms PDF Viewer](https://www.syncfusion.com/blogs/post/view-pdf-annotations-as-a-list-and-navigate-using-xamarin-forms-pdf-viewer.aspx "Blog: View PDF Annotations as a List and Navigate Using Xamarin.Forms PDF Viewer")
- [Let’s Replicate an Online Store UI in Xamarin.Forms](https://www.syncfusion.com/blogs/post/lets-replicate-an-online-store-ui-in-xamarin-forms.aspx "Blog: Let’s Replicate an Online Store UI in Xamarin.Forms")
- [Create a Wizard View in Xamarin.Forms: A Novice’s Guide](https://www.syncfusion.com/blogs/post/create-a-wizard-view-in-xamarin-forms.aspx "Blog: Create a Wizard View in Xamarin.Forms: A Novice’s Guide")
- [Creating a Floating Label Layout in Xamarin.Forms DataForm](https://www.syncfusion.com/blogs/post/creating-a-floating-label-layout-in-xamarin-forms-dataform.aspx "Blog: Creating a Floating Label Layout in Xamarin.Forms DataForm")