How to access and iterate through nested array

Question

I am using Laravel as my backend and jQuery for frontend. I am getting a response which has an array inside of an object which is inside the main array (hope that made sense).

Here is a portion of my object:

{
  "basket": [{
    "id": 17,
    "restaurant_id": 1,
    "table_id": 1,
    "item_id": 9,
    "item_language_id": 37,
    "price": "25.99",
    "qty": 1,
    "item": {
      "id": 9,
      "user_id": 1,
      "restaurant_id": 1,
      "category_id": 5,
      "name": "Grilled Beef with potatoes",
      "price": "25.99",
      "short_description": "Meat / Potatoes / Rice / Tomatoe",
      "itemlanguages": [{
        "id": 37,
        "user_id": 1,
        "item_id": 9,
        "lang_id": 9,
        "restaurant_id": 1,
        "category_id": 5,
        "category_language_id": 21,
        "name": "烤牛肉配土豆",
        "price": "MVR 25.99",
        "short_description": "肉/土豆/大米/西红柿",
        "description": "<p>test</p>"
      }]
    }
  }]
}

basket is an array. Inside that is an item object which has itemlanguages array. I want to iterate through the basket but display itemlaguages name , price etc. Not from the item . Here is what I have tried so far.

$.each(response.basket, function(index, val) {
  $.each(this.item.itemlanguages, function(index, val) {
    name = this.name;
    short_description = this.short_description;
  });

  var name = null;
  var short_description = null;
  var qty = this.qty;
  var price = this.price;

  $('<span>' + name + ' | ' + short_description + ' | ' + qty + ' | ' + price + '</span>').appendTo(basket);
});

I though I could iterate how I normally do by first doing each() on response.basket and inside of it doing this.item.itemlanguages but that did not work. I tried to assign the values to a variable. Any help is appreciated.

Answer 1

The issue is because name and short_description are defined within the $.each loop over itemlanguages , and are therefore out of scope of the outer $.each where you attempt to use them.

To fix this, move all the logic in to the inner $.each . Also note that you can use the second argument of $.each to reference the current entity in the loop, to make the syntax easier to understand (as there's less this keywords in use). Try this:

 var response = { "basket": [{ // other properties... "price": "25.99", "qty": 1, "item": { // other properties... "itemlanguages": [{ // other properties... "name": "烤牛肉配土豆", "short_description": "肉/土豆/大米/西红柿" }] } },{ // other properties... "price": "999.00", "qty": 2, "item": { // other properties... "itemlanguages": [{ // other properties... "name": "lorem ipsum dolor sit amet", "short_description": "lorem ipsum" }] } }] } var $basket = $('#basket'); $.each(response.basket, function(index, basket) { $.each(basket.item.itemlanguages, function(index, itemlanguage) { var name = itemlanguage.name; var short_description = itemlanguage.short_description; var qty = basket.qty; var price = basket.price; $('<span>' + name + ' | ' + short_description + ' | ' + qty + ' | ' + price + '</span>').appendTo($basket); }); }); 

 span { display: block; } 

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