How to loop through an array in an Ajax data response with Jquery?

I would like to be able to loop through the image_id elements of the following Json:

{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

I try to do it in the following way but I don't know how to go through the elements of a gallery. It is an aray inside the data 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");
        },
    });

PLease help

3 answers

  • answered 2021-04-08 03:14 brk

    You need to iterate over data.GalleryImage. Here is basic example with ajax response

    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>

  • answered 2021-04-08 03:15 Huy Duy

    According to the response, you need to access GalleryImage like so:

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

  • answered 2021-04-08 03:18 fortunee

    Refactor your success method to look like this:

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