如何使用 Jquery 在 Ajax 数据响应中循环遍历数组？答案

【问题标题】：How to loop through an array in an Ajax data response with Jquery?如何使用 Jquery 在 Ajax 数据响应中循环遍历数组？
【发布时间】：2021-04-08 03:09:26
【问题描述】：

我希望能够遍历以下 Json 的 image_id 元素：

{status: "ok", data: {…}}
data:
GalleryImage: Array(19)
0: {image_id: "I00008aYI9cCxw4s", gallery_id: "G0000g92exnUn86c"}
1: {image_id: "I0000MuaQtl0LMwc", gallery_id: "G0000g92exnUn86c"}
2: {image_id: "I0000CvKiwaHj9Rg", gallery_id: "G0000g92exnUn86c"}
3: {image_id: "I0000tyBV3PjPkbc", gallery_id: "G0000g92exnUn86c"}
4: {image_id: "I0000CpgUirvZ05Y", gallery_id: "G0000g92exnUn86c"}
5: {image_id: "I00007piqCJCoYCI", gallery_id: "G0000g92exnUn86c"}
6: {image_id: "I0000igOoazcZnzs", gallery_id: "G0000g92exnUn86c"}
7: {image_id: "I0000pClIDfC0IW8", gallery_id: "G0000g92exnUn86c"}
8: {image_id: "I0000oFFxyzDq19k", gallery_id: "G0000g92exnUn86c"}
9: {image_id: "I0000nnPEBbLY2w0", gallery_id: "G0000g92exnUn86c"}
10: {image_id: "I0000nNyL.wjbrlg", gallery_id: "G0000g92exnUn86c"}
11: {image_id: "I0000usbcSdKvtZ8", gallery_id: "G0000g92exnUn86c"}
12: {image_id: "I0000BoONixLgM6w", gallery_id: "G0000g92exnUn86c"}
13: {image_id: "I0000EXj2yigWGAs", gallery_id: "G0000g92exnUn86c"}
14: {image_id: "I0000OWfrVd8XWaw", gallery_id: "G0000g92exnUn86c"}
15: {image_id: "I0000lT3LrDZNC5c", gallery_id: "G0000g92exnUn86c"}
16: {image_id: "I0000VDoQ4n_geaU", gallery_id: "G0000g92exnUn86c"}
17: {image_id: "I0000P57enz5_LkY", gallery_id: "G0000g92exnUn86c"}
18: {image_id: "I0000LEg5hLefuAM", gallery_id: "G0000g92exnUn86c"}
length: 19
__proto__: Array(0)
Paging: {page: 1, first: "https://www.photoshelter.com/psapi/v3/gallery/G0000g92exnUn86c/images?api_key=lcibjNnEoV4", last: "https://www.photoshelter.com/psapi/v3/gallery/G0000g92exnUn86c/images?api_key=lcibjNnEoV4"}
Total: 19
__proto__: Object
status: "ok"
__proto__: Object

我尝试按以下方式进行操作，但我不知道如何浏览画廊的元素。它是数据对象内部的一个数组


    $.ajax({
        type: 'GET',
        url: url,
        contentType: JSON,
        processData: false,
        success: function (data) {
            console.log(data);
            var row = "";
            $.each(data, function (index, item) {            
                row += "";
                row += "";
                row += "";
            });
            //Data stamp
            $("#images").html(row);
        },
        error: function () {
            //alert("Error en la carga de Imágenes");
        },
    });

请帮忙

【问题讨论】：

是console.log(data)你上面的数据吗？

标签： javascript jquery object

【解决方案1】：

重构你的成功方法，如下所示：

success: function (response) {
  var row = "";
  $.each(response.data.GalleryImage, function (index, item) {            
     row += item.image_id";
  });
  //Data stamp
  $("#images").html(row);
},

【讨论】：

我很高兴它成功了。你也可以给它一个赞成票。 @DanielLazarte

【解决方案2】：

您需要遍历data.GalleryImage。这是 ajax 响应的基本示例

let data = {
  GalleryImage: [{
      image_id: "I00008aYI9cCxw4s",
      gallery_id: "G0000g92exnUn86c"
    },
    {
      image_id: "I0000MuaQtl0LMwc",
      gallery_id: "G0000g92exnUn86c"
    },
    {
      image_id: "I0000CvKiwaHj9Rg",
      gallery_id: "G0000g92exnUn86c"
    },
    {
      image_id: "I0000tyBV3PjPkbc",
      gallery_id: "G0000g92exnUn86c"
    }
  ]
}
let row = '';
$.each(data.GalleryImage, function(index, item) {
  row += item.gallery_id
});

$("#images").html(row);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="images"></div>

【讨论】：

【解决方案3】：

根据回复，你需要像这样访问GalleryImage：

$.each(data.data.GalleryImage, function (index, item) {            
  row += "";
  row += "";
  row += "";
});

【讨论】：