How do I iterate nested API response in AJAX?

Question

I'm trying to iterate a nested API response and display them inside a html. I managed to do single image because the response only have single value.

**API response **

{"result":{"totalResults":5861511,"products":[{"productTitle":"S-XL Plus Size Tunic Autumn <font><b>Women</b></font> Dresses Casual Cartoon Print Christmas Dress Casual Loose Long Sleeve Party Dress Vestidos","originalPrice":"US $7.98","imageUrl":"https://ae01.alicdn.com/kf/H3ba2899c892d4a88a5f704453c39942ae/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg","productUrl":"https://www.aliexpress.com/item/S-XL-Plus-Size-Tunic-Autumn-Women-Dresses-Casual-Cartoon-Print-Christmas-Dress-Casual-Loose-Long/4000353066650.html","allImageUrls":"https://ae01.alicdn.com/kf/H3ba2899c892d4a88a5f704453c39942ae/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/H218b19ee8bfc4f6ebe74b4297ca8395f5/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/H14b48746d6eb4d5788a7a9f6ce37195c7/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/Hb4b1f8b6223d4e7c88208751bfa681886/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/Hcfd17f95ac85470d9550d13f3683adc1I/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg}]},"errorCode":20010000,"currentPageNum":0,"totalPageNum":0}

main.js

    $(function (){

        var $orders = $('#orders');
        var $productimage = $('#productimage');
        var $output = $('#output');

        $.ajax({
            type: 'GET',
            url: 'http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/9420?fields=productUrl,allImageUrls,imageUrl,originalPrice,productTitle&keywords=women',
            success: function(orders){
                $.each(orders, function(i, order){

                    $orders.append('<a href="' + order.products[0].productUrl + '">' + order.products[0].productTitle + '</a>');
                    $output.append(order.products[0].allImageUrls[1]);

                    // $productimage.append('<img class="pic-1" src="' + order.products[0].imageUrl + '">');  // single image

                });
            }
        });


    });

Result generated

"t"

How do you create a loop for $output from allImageUrls ?

Answer 1

$.each(orders, function(i, order) {
   $orders.append('<a href="' + order.products[0].productUrl + '">' + order.products[0].productTitle + '</a>');
      //------------------------Start 
      var allImageUrlsArray = []; // Create array;
      //split with comma, assign to varaible and loop it.
      allImageUrlsArray = order.products[0].allImageUrls.split(',');
      for (var i = 0; i < allImageUrlsArray.length; i++) {
          $output.append(allImageUrlsArray[i]);
      }
      //---------------------------End 

});

Answer 2

You did some mistakes in iterate JSON Object, and allImageUrls contain multiple images with comma(,) so you should convert this into array. Let's check the below example

LN: 21 you can loop the allImageUrls

for([k, v] of Object.entries(value.allImageUrls)){
  console.log(k, v);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="orders"></div> <script> $(function() { var $orders = $('#orders'); var $productimage = $('#productimage'); var $output = $('#output'); $.ajax({ type: 'GET', url: 'https://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/9420?fields=productUrl,allImageUrls,imageUrl,originalPrice,productTitle&keywords=women', success: function(item) { let orders = item.result.products; orders = orders.map(product => { product.allImageUrls = product.allImageUrls.split(','); return product; }); var con = ''; for ([key, value] of Object.entries(orders)) { con += "<li><a href='" + value.productUrl + "'><img style='width: 30px;' src='" + value.allImageUrls[0] + "'/>" + value.productTitle + "</a></li>"; // Loop all images for ([k, v] of Object.entries(value.allImageUrls)) { console.log(k, v); } } $orders.append("<ul>" + con + "</ul>"); } }); }); </script>

Answer 3

You need to split the allImageUrls and then run them in a loop as follows:

 var result ={ "result": { "totalResults": 5861511, "products": [ { "productTitle": "S-XL Plus Size Tunic Autumn <font><b>Women</b></font> Dresses Casual Cartoon Print Christmas Dress Casual Loose Long Sleeve Party Dress Vestidos", "originalPrice": "US $7.98", "imageUrl": "https://ae01.alicdn.com/kf/H3ba2899c892d4a88a5f704453c39942ae/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg", "productUrl": "https://www.aliexpress.com/item/S-XL-Plus-Size-Tunic-Autumn-Women-Dresses-Casual-Cartoon-Print-Christmas-Dress-Casual-Loose-Long/4000353066650.html", "allImageUrls": "https://ae01.alicdn.com/kf/H3ba2899c892d4a88a5f704453c39942ae/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/H218b19ee8bfc4f6ebe74b4297ca8395f5/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/H14b48746d6eb4d5788a7a9f6ce37195c7/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/Hb4b1f8b6223d4e7c88208751bfa681886/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg,https://ae01.alicdn.com/kf/Hcfd17f95ac85470d9550d13f3683adc1I/S-XL-Plus-Size-Tunic-Autumn-font-b-Women-b-font-Dresses-Casual-Cartoon-Print-Christmas.jpg" } ] }, "errorCode": 20010000, "currentPageNum": 0, "totalPageNum": 0 } var allImagesList = result.result.products[0].allImageUrls.split(','); allImagesList.forEach((imageUrl)=>{ console.log(imageUrl); })

And your code will look like something as below:

    $(function (){

            var $orders = $('#orders');
            var $productimage = $('#productimage');
            var $output = $('#output');

            $.ajax({
                type: 'GET',
                url: 'http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/9420?fields=productUrl,allImageUrls,imageUrl,originalPrice,productTitle&keywords=women',
                success: function(orders){
                    $.each(orders, function(i, order){

                        $orders.append('<a href="' + order.products[0].productUrl + '">' + order.products[0].productTitle + '</a>');
                        $output.append(order.products[0].allImageUrls[1]);

var allImagesList = order.products[0].allImageUrls.split(',');
allImagesList.forEach((imageUrl)=>{
$productimage.append('<img class="pic-1" src="' + imageUrl + '">');  // single image
})


                    });
                }
            });


        });

Answer 4

 $(function() { var $orders = $('#orders'); var $productimage = $('#productimage'); var $output = $('#output'); $.ajax({ type: 'GET', url: 'http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/9420?fields=productUrl,allImageUrls,imageUrl,originalPrice,productTitle&keywords=women', success: function(orders) { $.each(orders.result.products, function(i, order) { console.log(order) $div = $('<div id = "' + "order_" + i + '"></div>'); $imageDiv = $('<div id = "' + "image_" + i + '"></div>'); // = $('#order_' + i); console.log($div) $div.append('<a href="' + order.productUrl + '">' + order.productTitle + '</a>'); //; var array = order.allImageUrls.split(','); for (var j = 0; j < array.length; j++) { //$output.append(order.allImageUrls[j]); $imageDiv.append('<img style="width:50px;height:50px" class="pic-1" src="' + array[j] + '">'); // single image } $div.append($imageDiv); $orders.append($div); }); } }); });

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

Hope this helps. :)