Question

我正在尝试为从数据库返回的每个'颜色'动态添加html复选框，数据类型为JSON。

我首先向控制器发出ajax请求：

  $.ajax({
        url: "Home/Colours",
        type: 'GET',
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        success: function (colours) {
            $.each(colours.id, function (i, colours) {
                $('#ColourCheck').append("<p><input type='checkbox' id='box" + colours.id + "'value='" + colours.id + "' class='checkbox'>Checkbox " + colours.id + "</p>");
            })
        }

返回的JSON是：

"[{\"Id\":1,\"Name\":\"Blue\"},{\"Id\":2,\"Name\":\"Red\"},{\"Id\":3,\"Name\":\"Yellow\"},{\"Id\":4,\"Name\":\"Green\"}]"

在浏览器中查看时，dev工具如下所示：

JSON

成功后我想在“#ColourCheck”附加一个新的复选框，如下所示：

<div id="ColourCheck"></div>

     success: function (colours) {
                    $.each(colours.id, function (i, colours) {
                        $('#ColourCheck').append("<p><input type='checkbox' id='box" + colours.id + "'value='" + colours.id + "' class='checkbox'>Checkbox " + colours.id + "</p>");
                    })

虽然我没有收到错误，但在使用dev工具进行调试时，我收到错误并且“迭代”存在如下：

Error message 我会假设我正在尝试错误地访问JSON数组中的数据但是我不确定我应该如何做到这一点，我先尝试解析：

jsonObj = jQuery.parseJSON( colours);

这没有任何区别，任何建议都会受到赞赏。

感谢。

Answer 1

这段代码能否解决您的问题？

$.ajax({
    url: "Home/Colours",
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    dataType: 'json',
    success: function (_colours) {

        _colours.forEach(function(colour){

            $('#ColourCheck').append("<p><input type='checkbox' id='box" + colour.id + "'value='" + colour.id + "' class='checkbox'>Checkbox " + colour.id + "</p>");

        });

    }

});

JQuery $ .each不会遍历json数据

1 个答案: