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

所以我想循环遍历数组，对数组中的每个项目执行某些操作，但是我无法正确执行，到目前为止，警报只是说“[object，Object]”并且这样做了两次。我确信有一个简单的解决方案，我只是没有看到它，任何帮助都非常感激。

Answer 1

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操作的数量

Answer 2

这是预期的行为。 data就是你要迭代的东西（这就是为什么它会显示两次，你的数据中有两个项目），使用alert()进行调试并不是很有用。尝试将其放在console.log()声明中。

但是，问题的解决方案是将data函数中的$.each替换为item：）

循环通过JSON数组问题

2 个答案: