How to access JSON Nested arrays with jquery

Question

I'm trying to access all brands and values for dropdown menu but I couldn't that with this way.

<select id="secim">
</select>

var data = [
        {
          "products": "Cars",
          "brands_values" : [
            {"brand":"fiat","value":1},
            {"brand":"bmw","value":2}
          ]
      }
      ];

$.each(data, function(i, item) {
        $('#secim').append($('<option>', {
          value: item.brands_values.value,
          text: item.brands_values.brand
        }));
      });

How could I do? Thank you

Answer 1

Just add another loop for the brands:

 var data = [ { "products": "Cars", "brands_values" : [ {"brand":"fiat","value":1}, {"brand":"bmw","value":2} ] }]; $.each(data, function(i, item) { if (item.brands_values) { item.brands_values.forEach(brands => { $('#secim').append($('<option>', { value: brands.value, text: brands.brand })); }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="secim"> </select> 

Note: You may want to use native .forEach in that case, since it is enough. I had performance issues with jQuery.each() in the past so I avoid it whenever I can( check this ):

data.forEach(item => {
    if (item.brands_values) {
        item.brands_values.forEach(brands => {
            $('#secim').append($('<option>', {
                value: brands.value,
                text: brands.brand
            }));
        });
    }
});

Answer 2

$.each(data, function(i, item) {
  $.each(item.brands_values, function(j, brand){
    $('#secim').append($('<option>', {
      value: brand.value,
      text: brand.brand
    }));
  });
});

You need another iteration - of course the first "loop" is not very elegant, but this is due to the given data format.

Working Fiddle: https://jsfiddle.net/3pL6n6pj/

Answer 3

Iterate over brand values and not just data. So that you can acces each brand and value.

  var data = [ { "products": "Cars", "brands_values" : [ {"brand":"fiat","value":1}, {"brand":"bmw","value":2} ] } ]; $.each(data[0].brands_values, function(i, item) { $('#secim').append($('<option>', { value: item.value, text: item.brand })); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="secim"> </select> 

Answer 4

First create a list of brand_values from data by using a #reduce() function. Then pass it as items to your $.each .

See demo below:

 var data = [{ "products": "Cars", "brands_values": [{ "brand": "fiat", "value": 1 }, { "brand": "bmw", "value": 2 } ] }]; var items = data.reduce(function(p,c){ c.brands_values.forEach(function(e){ p.push(e); }); return p; },[]); $.each(items, function(i,item) { $('#secim').append($('<option>', { value: item.value, text: item.brand })); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="secim"></select>