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:
Download the sample from GitHub.