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＆＃39; .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); 
}

Answer 3

您尝试更改json字符串而不是json对象上的json字符串（使用JSON.parse来执行此操作）。

// You have a string and you want and object : 
var string = "[....]";
var object = JSON.parse(string);

// You have a object and you want and string: 
var object = {...};
var string = JSON.stringify(object);

或者你可以更好地使用jQuery ajax函数的类型属性，（在你的成功函数之后放置＆＃39; json＆＃39; jQuery为你提供avec对象而不是json字符串）。如果您已经这样做，那么您已经拥有了一个对象，因此您无需更新数据

Answer 4

使用

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

Answer 5

jQuery(document).ready(function () { 
let table_responsive_data_html = "<table class='main-cart-table' id='tblOne'>";
        table_responsive_data_html += '</table>';
        alert(table_responsive_data_html);
});

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

5 个答案: