jQuery .each() not iterating through nested objects correctly in a JSON response
I'm having trouble iterating through a nested JSON object using jQuery's .each() method. I received a JSON response from an API that looks like this: ```json { "data": { "items": [ {"id": 1, "name": "Item 1", "details": {"desc": "Description 1"}}, {"id": 2, "name": "Item 2", "details": {"desc": "Description 2"}} ] } } ``` I want to loop through `items` and for each item, log the `id`, `name`, and `desc` to the console. However, I am running into issues where it seems like the inner object `details` is not being accessed properly. Here’s the code I’ve written: ```javascript $.getJSON('https://api.example.com/data', function(response) { $.each(response.data.items, function(index, item) { console.log('ID: ' + item.id); console.log('Name: ' + item.name); console.log('Description: ' + item.details.desc); }); }); ``` When I run this code, I get the following behavior in the console: `TypeError: item.details is undefined`. I've confirmed that the JSON structure is correct by logging `response.data.items` before the .each() call, and it appears as expected. I’ve also tried adding a check to see if `item.details` exists before attempting to access `desc`, but it still leads to the same behavior. Here’s what I tried: ```javascript $.each(response.data.items, function(index, item) { if (item.details) { console.log('Description: ' + item.details.desc); } else { console.log('No details available for this item.'); } }); ``` However, the behavior continues. Is there something I'm missing? Any help would be appreciated! I'm using jQuery version 3.6.0 and testing this in Chrome.