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.