How to load a json file in a MAUI ListView?

Question

I have wrote this piece of code to deserialize a json file in a MAUI ListView but it shows the name of the Drug class 3 times.

I used 2 MAUI controls a SearchBar and a ListView in order to do research inside my json file.

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
        Device.BeginInvokeOnMainThread(async () =>
        {
            await LoadMauiAssetAsync();
        });

    }

    async Task LoadMauiAssetAsync()
    {   
        var stream = await FileSystem.OpenAppPackageFileAsync("drugs.json");
        if (stream != null)
        {
            List<Drug> drugs = JsonSerializer.Deserialize<List<Drug>>(stream);
            this.lv.ItemsSource = drugs;
        }

    }

}

This is my Drug class :

    internal class Drug
    {
        public string DrugName { get; set; }
        public string DrugClassandorMechanism { get; set; }
        public string PharmacokineticsandMetabolism { get; set; }
        public string Toxicity { get; set; }
        public string Indications { get; set; }
        public string DosageandAdministration { get; set; }
    }

and this my drugs.json file :

[
  {
    "Drug Name": "Abiraterone acetate (Zytiga)",
    "Drug Class and\/or\nMechanism": "Inhibits androgen\nbiosynthesis",
    "Pharmacokinetics\nand Metabolism": "Do not take with food;\ninhibits CYP2D6",
    "Toxicity": "Joint swelling or\ndiscomfort, edema;\nmonitor liver enzymes",
    "Indications": "Metastatic prostate\ncancer; castration\nresistant with prior\nuse of docetaxel",
    "Dosage and\nAdministration": "1000 mg QD PO with\n5 mg prednisone BID"
  },
  {
    "Drug Name": "Ado-trastuzumab emtansine\n(Kadcyla)",
    "Drug Class and\/or\nMechanism": "Antibody-drug\nconjugate",
    "Pharmacokinetics\nand Metabolism": "Avoid strong CYP3A\ninhibitor",
    "Toxicity": "Hepatotoxic, cardiotoxic,\nfetal harm",
    "Indications": "Her2+ BC metastasis,\nprior trastuzumab and\na taxane",
    "Dosage and\nAdministration": "3.6 mg\/kg IV every\n3 wk"
  },
  {
    "Drug Name": "Afatinib (Gilotrif)",
    "Drug Class and\/or\nMechanism": "Kinase inhibitor",
    "Pharmacokinetics\nand Metabolism": "Reduce dose if PgP\ninhibitor used",
    "Toxicity": "Diarrhea, severe\ncutaneous reaction",
    "Indications": "First-line NSLC\nmetastasis with EGFR\nexon 19 del or exon\n21 sub per FDA test",
    "Dosage and\nAdministration": "40 mg QD PO"
  }
]

How can I fix it? Is a ListView the suitable control to list the drugs from the json file?

Thank you.

Answer 1

You have a few options. The easiest (although probably not the best solution for customizability) is to add an override ToString in your Drug class and return what you would like displayed.

The more flexible solution is to use data templates as explained in the ListView documentaiton.

For example, you might use a TextCell to display the name and class as shown in the following XAML:

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding DrugName}"
                      Detail="{Binding DrugClassandorMechanism}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>