Populating list view using a JSON subarray - xamarin.forms

Question

I have the following JSON url. I am trying to populate my list view using the subarrays hair[] and math[] after getting them from the JSON url.
Here is the url http://pastebin.com/raw.php?i=2fzqLYXj
Inside the array "Students" there is a subarray called "Properties" and another sub array inside "Properties" called "Grades". "hair" is inside "Properties" and "math" is inside "Grades".
Here is my WebService class
public class WebService
{
public WebService ()
{
}
public async Task<Rootobject> GetStudentInfoAsync (string apiurl) {
var client = new HttpClient ();
var response = await client.GetStringAsync(string.Format(apiurl));
return JsonConvert.DeserializeObject<Rootobject>(response.ToString());
}
}
And here is my View Model
public class Property
{
public int iq { get; set; }
public string hair { get; set; }
public string glasses { get; set; }
public Grade[] Grades { get; set; }
}
public class StudentInfo
{
public string name { get; set; }
public string lastname { get; set; }
public Property[] Properties { get; set; }
public string StudentName {
get{ return String.Format ("{0}", name); }
}
//I am accessing the JSON sub arrays with the following to get the "hair" and "math" properties.
public string[] HairColors
{
get
{
return (Properties ?? Enumerable.Empty<Property>()).Select(p => p.hair).ToArray();
}
}
public string[] MathGrades
{
get
{
return (Properties ?? Enumerable.Empty<Property>()).SelectMany(p => p.Grades ?? Enumerable.Empty<Grade>()).Select(g => g.Math).ToArray();
}
}
}
public class Rootobject
{
public StudentInfo[] students { get; set; }
}
}
And here is how I populate my list view with student names which works. Notice "StudentName" was not in a subarray.
var sv = new WebService();
var es = await sv.GetStudentInfoAsync(apiurl);
Xamarin.Forms.Device.BeginInvokeOnMainThread( () => {
listView.ItemsSource = es.students;
});
var cell = new DataTemplate (typeof(TextCell));
listView.ItemTemplate = cell;
listView.ItemTemplate.SetBinding(TextCell.TextProperty, "StudentName");
But I need to populate my list view with HairColors and MathGrades as follows but the following code does not work.
var sv = new WebService();
var es = await sv.GetStudentInfoAsync(apiurl);
Xamarin.Forms.Device.BeginInvokeOnMainThread( () => {
listView.ItemsSource = es.students;
});
var cell = new DataTemplate (typeof(TextCell));
listView.ItemTemplate = cell;
listView.ItemTemplate.SetBinding(TextCell.TextProperty, "HairColors");
listView.ItemTemplate.SetBinding (TextCell.DetailProperty, "MathGrades");
What doesn't this code work? How do I make it work?

Answer 1

You could make a custom converter for this:
public class HairColorsConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
var hairColors = (string[])value;
return string.Join(", ", hairColors);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
Then bind this like:
SetBinding(TextCell.TextProperty, "HairColors", BindingMode.Default, new HairColorsConverter());