Cascading dropdown duped values

Question

I am trying to get the cascading dropdown to work in razor pages and I am scratching my head now, since I need this approach:

Country -> City/Plant (so, classic, entry level task)

the problem is, I am doing something wrong and the list that should populate all cities/plants, does show the correct number of values from the table, but lists only the first value duplicated by the distinct number of requested values

duplicated values, the count is ok

interface:

 public interface ICountry
{
    IEnumerable<getCountries> GetCountries();
    IEnumerable<getCountriesAndPlants> GetPlants(string id);
}

public class CountryService : ICountry
{
    private readonly CContext _context;
    public CountryService(CContext context)
    {
        _context = context;
    }
    public IEnumerable<getCountries> GetCountries()
    {
        IEnumerable<getCountries> countries = _context.GetCountries.ToList();
        return countries;
    }

    public IEnumerable<getCountriesAndPlants> GetPlants(string country)
    {
        IEnumerable<getCountriesAndPlants> plant = _context.GetCountriesAndPlants.Where(plants => plants.Country == country).ToList();
        return plant;
    }
}

data

 public partial class getCountries
{
    [Key]
    public string Country { get; set; }

}

public partial class getCountriesAndPlants
{
    [Key]
    public string Country { get; set; }
    public string PlantName { get; set; }

}


private readonly ICountry _countryService;
public CreateBudget(ICountry countryService)
    {
        _countryService = countryService;
    }
public JsonResult OnGetPlants(string country)
    {
        return new JsonResult(_countryService.GetPlants(country));
    }
    public IEnumerable<getPlants> getPlants { get; set; }
    public IEnumerable<getCountries> getCountries { get; set; }

script

            <script type="text/javascript">
            $(function () {
                $("#country").on("change", function () {
                    var country = $(this).val();
                    $("#plt").empty();
                    $("#plt").append("<option value=''>Select Plant</option>");
                    $.getJSON(`?handler=Plants&country=${country}`, (data) => {
                        $.each(data, function (i, item) {
                            console.log(i);
                            $("#plt").append(`<option value="${item.country}">${item.plantName}</option>`);
                        }); 
                    });
                });
            });
        </script>

any help would be highly appreciated, thank you

Answer 1

For anyone who struggles with this in the future:

The issue I was not aware of was the key in the datamodel. As I started rebuilding the datamodel I saw i had [Key] annotation on a column that was not the primary key in the sql db, so all I had to add was [HasNoKey] annotation in the OnModelCreating:

            modelBuilder.Entity<CountriesAndPlants>(entity =>
        {
            entity.HasNoKey();
        });