CODEWITHSUNDEEP
javascriptjquery
Tod
Tod

Reputation: 187

How to parse through objects?

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'],
}

Upvotes: 1

Views: 198

Answers (4)

CertainPerformance
CertainPerformance

Reputation: 370979

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]) => {

Upvotes: 1

ThS
ThS

Reputation: 4783

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.

Upvotes: 0

Pietro Nadalini
Pietro Nadalini

Reputation: 1800

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>

Upvotes: 0

LexH
LexH

Reputation: 1147

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.

Upvotes: 0

Related Questions