通过JSON阵列问题循环

Question

所以我有一个ajax调用，它返回此数组：

    [
      {
        "id":"47",
        "description":"Or pancakes?",
        "source":"",
        "uncut_url":"uploads/uncut/IMG_20140221_100557.jpg",
        "300_url":"uploads/300/IMG_20140221_100557.jpg",
        "600_url":"uploads/600/IMG_20140221_100557.jpg",
        "created":"2014-03-07 15:01:41"
      },
      {
        "id":"46",
        "description":"Who doesnt like eggs benedict?",
        "source":"",
        "uncut_url":"uploads/uncut/2014-02-20 08.40.26.jpg",
        "300_url":"uploads/300/2014-02-20 08.40.26.jpg",
        "600_url":"uploads/600/2014-02-20 08.40.26.jpg",
        "created":"2014-03-07 15:00:15"
      }
    ]

我想将其添加到我计划使用$（）的DIV中。append（）;

到目前为止，我已经得到了：

          $.ajax({
            type: "POST",
            url: "get_images.php",
            data: {offset: img_no},
            dataType: "json",
            success: function(data){
              $.each(data, function(index, item){
                alert(data);
                $( "#maincontainer" ).append( "<div class='imgcontain'>" );
                $( "#maincontainer" ).append( "<img class='thumb' src='"+data.300_url+"' />" );
                $( "#maincontainer" ).append( "</div>" );
          });

所以我想循环遍历数组，对数组中的每个项目做点事。我敢肯定有一个简单的解决方案，我只是看不到它，任何帮助都非常感谢。

Answer 1

这是预期的行为。data是您要迭代的内容（这就是为什么它显示了两次，数据中有两个项目），并且使用alert()调试不会非常有帮助。尝试将其放入console.log()语句中。

但是，解决问题的方法是用item中的data替换CC_6：）

Answer 2

append（）无法像字符串串联一样工作。

当您说$( "#maincontainer" ).append( "<div class='imgcontain'>" )创建创建并关闭目标DIV元素时，将img作为兄弟姐妹而不是作为后代创建。

还需要使用item在迭代回调中的数组中引用当前项目。

$.ajax({
    type: "POST",
    url: "get_images.php",
    data: {
        offset: img_no
    },
    dataType: "json",
    success: function (data) {
        var array = [];
        $.each(data, function (index, item) {
            array.push("<div class='imgcontain'>");
            //need to use item to refer current item
            array.push("<img class='thumb' src='" + item.300_url + "' />");
            array.push("</div>");
        });
        $("#maincontainer").append(array.join(''));
    }
})

此处使用基于数组的解决方案，因为它限制了DOM操作的数量