无法在 MVC 中使用 jquery/js 将 json 数据(API 结果）绑定到下拉列表

Unable to bind json data (api result) to dropdown using jquery/js in MVC

本文关键字：API 数据 json 结果 下拉列表 绑定 js MVC jquery      更新时间：2023-09-26

我想将 API 返回的 json 数据绑定到下拉列表。但无法获取值 ID 和名称。Json 格式 ：

{
    "categories": [
        {
            "categories": {
            "id": 1,
            "name": "CatOne"
            }
        },
        {
            "categories": {
                "id": 2,
                "name": "CatTwo"
            }
        }
    ]
}

我正在返回 JsonResult，使用 

return Json(responseData, JsonRequestBehavior.AllowGet);

而在Jquery调用中，我正在使用

$.ajax({
    type: "POST",
    url: "/Home/City",
    contentType: "application/json; charset=utf-8",
    global: false,
    async: false,
    dataType: "json",
    success: function (jsonObj) {
        var listItems = "";
        //here I want to get id and name
    });
    }
});

您可以从json中填充下拉列表，如下所示。

var json = {
        "categories": [
            { "categories": { "id": 1, "name": "CatOne" } },
            { "categories": { "id": 2, "name": "CatTwo" } }
        ]
    }
$.each(json.categories, function () {
    $('select').append('<option value="' + this.categories.id + '">' + this.categories.name + '</option>')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>

您可以在成功回调中插入断点（或debugger;语句）。然后你可以检查你的jsonObj它会准确地告诉你你需要知道什么。

在这种情况下，您应该能够迭代jsonObj.categories，并且可以通过jsonObject.categories[i].categories.id和jsonObject.categories[i].categories.name访问您的 id 和 name 属性

因此，您的成功方法将如下所示： for(var i = 0; i < jsonObj.categories.length; i++) { var category = jsonObj.categories[i].categories; var id = category.id; var name = category.name; }

我还建议以不同的方式格式化您的 json，正如其他答案所建议的那样。

相关文章：