Jquery .GET function from JSON data

Question

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

score 0 · Answer 1 · edited Dec 24 '22 at 09:53

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>

edited Dec 24 '22 at 09:53

Tyler2P

2,324
26
22
31

answered Dec 23 '22 at 08:04

Mower

177
2
10

Thank you so much. How do you console.log each product details? – James Khor Dec 23 '22 at 08:20
The console shows products: [object Object], [object Object], ... Sorry for my ignorance. I am taking a part time course in javascript and it is a crash course. So, I am learning on my own. – James Khor Dec 23 '22 at 08:22
You mean you want to get each product from this url: https://dummyjson.com/products instead of getting the https://dummyjson.com/products/1? – Mower Dec 23 '22 at 08:29
if the URL is changed to https://dummyjson.com/products where there are 30 products instead of 1 product, what needs to be done to your codes? Thanks. – James Khor Dec 23 '22 at 08:37
Edited my answer. Check it out. – Mower Dec 23 '22 at 08:42
It does not seem to work. console.log(products[i].id), console.log(products[i].title) and console.log(products[i].description) are undefined. – James Khor Dec 23 '22 at 09:01
It should work, if you run the code here, you get the results correctly. Try to comment out your code and copy paste mine first. Also don't forget to paste the jquery link. – Mower Dec 23 '22 at 09:09
You have helped me to understand how to use jQuery to parse JSON data. The JSON data from https://dummyjson.com/products is different from other JSON data that I have successfully parsed. I determined to understand why my codes didn't work, and now I could understand this topic. All thanks to you! – James Khor Dec 23 '22 at 09:26
You are welcome. Can be tricky, depending on the data, but JSON is always a good thing to work with :) – Mower Dec 23 '22 at 09:27

score 0 · Answer 2 · answered Dec 25 '22 at 08:39

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

Jquery .GET function from JSON data

2 Answers2