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

Question

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

is console.log(data) the data you have above?

fortunee
– fortunee

2021-04-08 03:12:21 +00:00
Commented Apr 8, 2021 at 3:12 — fortunee
– fortunee, Commented Apr 8, 2021 at 3:12

fortunee · Accepted Answer · 2021-04-08 03:18:03Z

1

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

answered Apr 8, 2021 at 3:18

fortunee

4,3622 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fortunee Over a year ago

I'm glad it worked. You can give it an upvote as well. @DanielLazarte

brk · Accepted Answer · 2021-04-08 03:14:51Z

0

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 Apr 8, 2021 at 3:14

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Huy Duy · Accepted Answer · 2021-04-08 03:15:17Z

0

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

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

answered Apr 8, 2021 at 3:15

Huy Duy

8628 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related