So what I am doing is querying an API that successfully returns my data. I want to let the user filter the data they see by category. Here is the C# code
@code {
private Root alldata;
IEnumerable<Entry> apis;
protected override async Task OnInitializedAsync()
{
try
{
alldata = await Http.GetFromJsonAsync<Root>("https://api.publicapis.org/entries");
Console.WriteLine(alldata.count);
apis = alldata.entries;
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
public class Entry
{
public string API { get; set; }
public string Description { get; set; }
public string Auth { get; set; }
public bool HTTPS { get; set; }
public string Cors { get; set; }
public string Link { get; set; }
public string Category { get; set; }
}
public class Root
{
public int count { get; set; }
public List<Entry> entries { get; set; }
}
void OnChange(object value, string name)
{
var str = value is IEnumerable<object> ? string.Join(", ", (IEnumerable<object>)value) : value;
Console.WriteLine($"{name} value changed to {str}");
}
When I try to use a Radzen component to show the Categories, it remains empty. This is the Radzen Component I am trying to use:
<div class="col-lg-4 sticky-top">
<h3>Categories</h3>
<RadzenDropDown AllowClear="true" TValue="string" Style="width:300px"
Data=@(apis.Select(a => a.Category).Distinct())
Change=@(args => OnChange(args, "DropDown")) />
</div>
How exactly would I go about populating this dropdown with the Categories of the APIs that the API itself is returning? And then only show the data where the category is a match?
Keep in mind the OnChange() function is one that I copied straight from the Radzen docs, I'm not 100% certain of it's purpose.
The docs for the Radzen dropdown I'm trying to use can be found here: https://blazor.radzen.com/dropdown
Thank you! :)