Articles in this section
Category / Section

How to bind remote JSON data to Xamarin.Forms chip group (SfChipGroup)

1 min read

You can bind the data from the remote JSON file in Xamarin.Forms SfChipGroup using the ItemsSource property.

 

[XAML]

 

The JSON data can be bound to the SfChipGroup ItemsSource property.

 

  <buttons:SfChipGroup 
    ItemsSource="{Binding Data}" 
    ChipPadding="8,8,0,0" 
    DisplayMemberPath="ShipCity">
            <buttons:SfChipGroup.ChipLayout>
                <FlexLayout 
      HorizontalOptions="Start" 
      VerticalOptions="Center" 
      Direction="Row" 
      Wrap="Wrap"
      JustifyContent="Start"
      AlignContent="Start" 
      AlignItems="Start"/>
            </buttons:SfChipGroup.ChipLayout>
        </buttons:SfChipGroup>

 

[C#]

 

Accessed the JSON file from remote server and deserialize the object to return as collection of model.

 

private const string Url = "https://ej2services.syncfusion.com/production/web-services/api/Orders"; //This url is a free public api intended for demos
 
private readonly HttpClient _client = new HttpClient(); //Creating a new instance of HttpClient. (Microsoft.Net.Http)
 
        private ObservableCollection<Model> data;
 
        public ObservableCollection<Model> Data
        {
            get { return data; }
            set
            {
                data = value;
                OnPropertyChanged("Data");
            }
        }
 
      
 
        public ViewModel()
        {
            Data = new ObservableCollection<Model>();
            GetData();
 
        }
 
       async void GetData()
        {
            string content = await _client.GetStringAsync(Url); //Sends a GET request to the specified Uri and returns the response body as a string in an asynchronous operation
            var json_Datas = JsonConvert.DeserializeObject<ObservableCollection<Model>>(content); //Deserializes or converts JSON String into a collection of Post
            Data = json_Datas;
        }

Output:

Load JSON data to Xamarin.Forms SfChipGroup

 

 

Download the sample from GitHub.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied