javascript - 在foreach循环中解析jquery中的json数组

Question

我正在尝试用对象解析 json 数组并使用它们来创建多个复选框。这就是我所拥有的:

JSON 数据:

[{
    "ID": 1,
    "Name": "Bacon",
    "Description": "",
    "Price": 0
}, {
    "ID": 2,
    "Name": "Beef",
    "Description": "",
    "Price": 0
}, {
    "ID": 3,
    "Name": "Chicken",
    "Description": "",
    "Price": 0
}, {
    "ID": 4,
    "Name": "Ham",
    "Description": "",
    "Price": 0
}]

在 JS 代码中我有这样的:

success: function (data) {
    var objects = JSON.stringify(data);
    for (var key in objects) {
        var checkBox = "<input type='checkbox' data-price='" + key.Price + "' name='" + key.Name + "' value='" + key.ID + "'/>" + key.Name + "<br/>";
        $(checkBox).appendTo('#modifiersDiv');
    };
    $('#addModifiers').modal('show');
}

但是键对象不包含任何数据。我的问题是如何执行 foreach 循环并获取我需要的数据并在复选框属性中获取该数据。

Answer 1

您的数据应该已经是一个 javascript 数组，因为您已经为 jQuery Ajax 调用指定了 JSON 类型，因此它应该已经将 JSON 解析为 javascript。因此，您可以直接将其作为数组进行迭代:

success: function (data) {
    for (var i = 0; i < data.length; i++) {
        var checkBox = "<input type='checkbox' data-price='" + data[i].Price + "' name='" + data[i].Name + "' value='" + data[i].ID + "'/>" + data[i].Name + "<br/>";
        $(checkBox).appendTo('#modifiersDiv');
    }
    $('#addModifiers').modal('show');
}

或者，如果您想使用 jQuery 的 .each() 迭代器而不是 for 循环，您可以这样做:

success: function (data) {
    $.each(data, function(key, item) {
        var checkBox = "<input type='checkbox' data-price='" + item.Price + "' name='" + item.Name + "' value='" + item.ID + "'/>" + item.Name + "<br/>";
        $(checkBox).appendTo('#modifiersDiv');
    });
    $('#addModifiers').modal('show');
}