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.

Just FYI, the data structure you have is an object, not JSON. I've edited the question as such. — Rory McCrossan, Aug 30 '19 at 10:31
Possible duplicate of [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Heretic Monkey, Aug 30 '19 at 14:48

Rory McCrossan · Accepted Answer · 2019-08-30T14:42:41.037

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>

This works. But there is a problem. Its iterating over the number of data in `itemlanguages` and not `basket` itself. The result of `itemlanguages` will always be one. It comes out as an array for each item in basket. I want to iterate over basket. And each basket has itemlaguages inside of item. Hope I am making sense here. Now it returns only one value but I have two in basket which I want to output. I suppose it is returning only one value because the inner each is for itemlanguages and its count is 1. But thanks a lot for this as well! — Mohamed Ahmed, Aug 30 '19 at 14:40
`Now it returns only one value but I have two in basket which I want to output` I don't see how that's possible given it loops over `basket` too. Could you update the question to show a more accurate example of your data, including multiple baskets, and also the output you want to create — Rory McCrossan, Aug 30 '19 at 14:41
Note that I just updated the answer to show this working with multiple baskets — Rory McCrossan, Aug 30 '19 at 14:42
So sorry. Mistake on my end. The thing was that my second basket's itemlanguage was returning null. Forgot to check there. Thanks a bunch! — Mohamed Ahmed, Aug 30 '19 at 14:49

How to access and iterate through nested array

1 Answers1