How to parse through objects?

Question

how to loop through objects instead of an array?

$(function() {
  var alreadyFilled = false;
  var states = ['Alabama','Alaska','American Samoa','Arizona'];
  function initDialog() {
    clearDialog();
    for (var i = 0; i < states.length; i++) {
      $('.dialog').append('<div>' + states[i] + '</div>');
    }
  }
  initDialog();
});

here is object i need to loop through instead of above array.

var states_2 = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
}

Is this what you need? https://stackoverflow.com/questions/921789/how-to-loop-through-a-plain-javascript-object-with-the-objects-as-members — Pietro Nadalini, Sep 10 '18 at 22:17
Possible duplicate of [How to loop through a plain JavaScript object with the objects as members?](https://stackoverflow.com/questions/921789/how-to-loop-through-a-plain-javascript-object-with-the-objects-as-members) — ChrisG, Sep 10 '18 at 22:21
using lodash : _.each(states_2, out => _.map(out,_.values)); — Santosh, Sep 10 '18 at 22:26

CertainPerformance · Answer 1 · 2018-09-10T22:58:15.353

Easiest tweak would be to transform the object into an array first, and then you can use the same code you have originally:

var states_2 = {
  'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
  'Spain': ['Barcelona'],
  'Hungary': ['Pecs'],
  'USA': ['Downers Grove'],
  'Mexico': ['Puebla'],
};
var states = [].concat(...Object.values(states_2));
console.log(states);

Also note that you might create a full HTML string of the states first, and only append once - that way, the HTML only changes once, rather than many times:

$('.dialog').append(
  states.map(state => '<div>' + state + '</div')
  .join('')
);

To loop through the object itself without changing to an array initially, just iterate over Object.values of the object to get the inner arrays:

var states_2 = {
  'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
  'Spain': ['Barcelona'],
  'Hungary': ['Pecs'],
  'USA': ['Downers Grove'],
  'Mexico': ['Puebla'],
};
Object.values(states_2).forEach((arr) => {
  arr.forEach((state) => console.log(state));
});

To get the country names as well, use Object.entries instead of Object.values to get the key name and the value at once:

Object.entries(states_2).forEach(([key, arr]) => {

it won't work if i change it to array , it should be looping through objects, since i need it for dependent dropdown. — Tod, Sep 10 '18 at 22:21
i need it for dependent dropdown, if i transform objects to array and loop through that array will it take more time to execute code? — Tod, Sep 10 '18 at 22:31
No, unless the object you're working with is unreasonably huge, there will be no effect on the overall speed. — CertainPerformance, Sep 10 '18 at 22:59

score 0 · Answer 2 · answered Sep 10 '18 at 22:18

0

You could use a nested loop. The outer loop would go through Object.entries(states_2), and the inner one would traverse the array for each country.

answered Sep 10 '18 at 22:18

LexH

936
7
20

score 0 · Accepted Answer · answered Sep 10 '18 at 22:23

You can make a loop for your object and then loop every array from that country like this:

$(function() {
  var alreadyFilled = false;
  var states_2 = {
    'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
    'Spain': ['Barcelona'],
    'Hungary': ['Pecs'],
    'USA': ['Downers Grove'],
    'Mexico': ['Puebla'],
  }

  function initDialog() {
    //clearDialog();
    for (var key in states_2) {
      for (var i = 0; i < states_2[key].length; i++) {
        console.log(states_2[key][i])
        //$('.dialog').append('<div>' + states_2[key][i] + '</div>');
      }
    }

  }
  initDialog();
});

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

score 0 · Answer 4 · answered Sep 10 '18 at 22:24

Using the for ... in loop you can loop through objects.

var states_2 = {
  'Germany': ['Duesseldorf', 
  'Leinfelden-Echterdingen', 
  'Eschborn'],
  'Spain': ['Barcelona'],
  'Hungary': ['Pecs'],
  'USA': ['Downers Grove'],
  'Mexico': ['Puebla'],
};
/** 
* loop through the 'states_2' object.
* the 'k' variable is the current key, 'states_2[k]' is the current key's value.
**/
for(var k in states_2) {
  console.log(k + ': ' + states_2[k]);
}

Hope I pushed you further.

How to parse through objects?

4 Answers4