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

This issue here is that brands_values is an array with multiple values. You would need an additional loop with your $.each to iterate over the elements within brands_values. — Lix
– Lix, Commented Aug 17, 2017 at 11:21

DontVoteMeDown · Accepted Answer · 2017-08-17 11:29:10Z

3

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
            }));
        });
    }
});

edited Aug 17, 2017 at 11:29

answered Aug 17, 2017 at 11:21

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suresh Atta Over a year ago

Works but why two loops ??

DontVoteMeDown Over a year ago

@ucnumara glad to help!!

konrad_pe · Accepted Answer · 2017-08-17 11:26:57Z

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/

answered Aug 17, 2017 at 11:26

konrad_pe

1,19011 silver badges28 bronze badges

Comments

kukkuz · Accepted Answer · 2017-08-17 11:28:27Z

0

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>

answered Aug 17, 2017 at 11:28

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

Comments

Suresh Atta · Accepted Answer · 2017-08-17 11:30:26Z

0

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>

edited Aug 17, 2017 at 11:30

answered Aug 17, 2017 at 11:21

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

1 Comment

DontVoteMeDown Over a year ago

IMO it's a good practice to check for brands_values value, it could be null. Also, if data.length > 0 as you're hard-coding it's index.

Collectives™ on Stack Overflow

How to access JSON Nested arrays with jquery

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related