在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循环并获取我需要的数据并在复选框属性中获取该数据.

提前谢谢,Laziale

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');
}

Answer 2

您不应该使用,var objects = JSON.stringify(data);因为数据已经是JSON对象.

用于JSON.stringify从对象创建字符串

用于JSON.parse从字符串创建对象

例:

var data = [{id: 1, name:'personsName'}, {id: 2, name:'personsName2'}]
var string = JSON.stringify(data)
var json = JSON.parse(string)

您可以循环使用数据并使用以下方法追加:

data.forEach(function(key, index){
   $("#modifiersDiv")
      .append($("<input></input>")
      .attr("type", "checkbox")
      .attr("data-price",key.Price )
      .attr("name",key.Name )
      .attr("value",key.ID)
      .text(key.Name); 
}