Question 35765 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery .GET function from JSON data

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);
        
    });
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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);
    })  
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search