Data fields are undefined in ASP.Net Core MVC using JSON-CodePudding

So, I have an issue with my Javascript code. I am using cascading dropdowns, one is for the car brand and another one for the car model. According to logic, when I choose one of the brands from the dropdown (e.g. Toyota or Audi, etc.) the second dropdown should show the models of the selected brand. Generally, I use GetModelsJson method in the controller to join Brand and Model tables and return models as json.

public JsonResult GetModelsJson(int p)
        {
            var models = (from x in GetModels() 
                          join y in GetBrands() on x.BrandId equals y.Id 
                          where x.BrandId == p
                          select new
                          {
                              Text = x.Name,
                              Value = x.Id.ToString()
                          }).ToList();
            return new JsonResult(new { data = models });
        }

In the view, I want to display the dropdowns using following code:

@Html.Label("Brands")
@Html.DropDownList("drpBrand",Model.BrandList,"--Select Brand--", new {@class = "form-control"})
@Html.Label("Models")
@Html.DropDownList("drpModel",Model.ModelList,"--Select Model--", new {@class = "form-control"})

The problem starts in the javascript code. Everything works fine until a for loop. For some reason, length of the data variable and other fields like text and value are undefined.

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $(function(){
        $('#drpBrand').change(function(){
            var id = $('#drpBrand').val();
            $.ajax({
                url: '/Admin/Vehicle/GetModelsJson',
                data: {p : id},
                type: "POST",
                dataType: "Json",
                success: function(data){
                    console.log(data);
                    $('#drpModel').empty();
                    for (let i = 0; i < 3; i  ){
                        $('#drpModel').append("<option value ='"   data[i].value   "'>"   data[i].text   "</option>");
                    }
                }
            });
        });
    });
</script>

As a result, the second dropdown for models becomes empty. Picture of the web site

As you can see from this picture, the second dropdown is empty, although according to console data has its fields like "A5", "A4", "A6".

CodePudding user response：

As the picture you uploaded the object from the server has a "data" field which contains the array so edit your code like this:

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
    $(function(){
        $('#drpBrand').change(function(){
            var id = $('#drpBrand').val();
            $.ajax({
                url: '/Admin/Vehicle/GetModelsJson',
                data: {p : id},
                type: "POST",
                dataType: "Json",
                success: function(data){
                    console.log(data);
                    $('#drpModel').empty();
                    for (let i = 0; i < data.data.length; i  ){
                        $('#drpModel').append("<option value ='"   data.data[i].value   "'>"   data.data[i].text   "</option>");
                    }
                }
            });
        });
    });
</script>