CODEWITHSUNDEEP
javascriptjquery
Mohamed Ahmed
Mohamed Ahmed

Reputation: 223

How to access and iterate through nested array

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.

Upvotes: 1

Views: 47

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337713

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>

Upvotes: 2

Related Questions