Jquery .GET function from JSON data-CodePudding

The jQuery below illustrates how I get the products from https://dummyjson.com/products. However, I don't know how to iterate the loop to retrieve each of the 30 products in the link and the details of each product.

$.get("https://dummyjson.com/products/1")
    .done(function(data, textStatus, jqXHR){

        console.log("typeof(data) is: "   typeof(data));
        console.log("data is: "  data);
        console.log(data.length);
  
        var result = [];
        result = JSON.parse(JSON.stringify(data));  
        console.log(typeof(result));
        console.log(result.length);
        var keys = Object.keys(result);

        keys.forEach(function (key) {
            console.log("forEach");
            console.log(key, result[key]);
            //console.log(result[0]);
        });

    })

    .fail(function(jqXHR, textStatus, errorThrown){
        alert("error");
        console.log(jqXHR);
        console.log(textStatus);
        console.log(errorThrown);
        
    });

CodePudding user response：

You should iterate through the object itself instead of the keys. Also, use let instead of var (see here).

$.get("https://dummyjson.com/products/1")
  .done(function(data) {
    let result = JSON.parse(JSON.stringify(data));
    $.each( result, function( key, value ) {
      console.log( key   ": "   value );
    });
  })

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

For multiple products you need another for loop to iterate through each product:

$(document).ready(function() {
  $.get("https://dummyjson.com/products")
    .done(function(data) {
      let result = JSON.parse(JSON.stringify(data));
      $.each(result, function( key, products) {
        for (let i = 0; i < products.length;   i) {
          console.log(products[i].id);
          console.log(products[i].title);
          console.log(products[i].description);
        }
      });
    })
});

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

CodePudding user response：

Thats is totally depends upon how was your reponse are.

If your response like this.

{
   "status": true,
   "data" : [
     {
         "id": 1,
         "name": "xyz",      
     },
     {
         "id": 2,
         "name": "xyz",      
     }
   ]
}

then you have to use following code:

$.get('/your-url', function(response) {
    if(response.status) {
       $.each(response.data, function(index, item) {
           console.log(item);
       })        
    } else {
       alert('Your API sent false status')
    }
})

Otherwise your response something like this.

[ 
     {
         "id": 1,
         "name": "xyz",      
     },
     {
         "id": 2,
         "name": "xyz",      
     }
]

then you have to use following code:

$.get('/your-url', function(response) {
    $.each(response, function(index, item) {
       console.log(item);
    })  
})