On click, loop through each object key

Question

I'm still learning JS and something is harder to understand than others.

Like so:

I am trying to change the theme of google maps by allowing users to click on a custom button.

I was using if else which works great but i wanted to add more themes and using a loop. Each time a user clicks, it selects:

object key 0, 
then click again object key 2 
and object key 3 
and repeat

I can get the object keys and values how I'm lost after that.

This is the theme object

let theme = { default: null, night: [multiple objects with nested arrays], dark: [multiple objects with nested arrays] }
creating button inside google maps then addEventListener

let themeToggle = document.createElement('button'); themeToggle.classList.add('controlUI'); themeToggle.innerHTML = ('Mode'); themeToggle.title = 'Change map theme';

map.controls[google.maps.ControlPosition.TOP_LEFT].push(themeToggle);

let mode = true; themeToggle.addEventListener('click', () => { if (mode) { map.setOptions({styles: theme.night}); } else { map.setOptions({styles: theme.default}); } mode = !mode; });

Above Works Fine

Im struggling to convert the if else to a loop and select each object key and then adding that to:

map.setOptions({styles: theme.night})

and then on click it loops through each key and repeat

themeToggle.addEventListener('click', () => {
    for ( let key  in theme) {
      map.setOptions({styles: theme[key]});
      console.log(theme[key])
    }
  });

it selects the last one by default and i cant toggle.

Any help would e really appreciated, just trying add all the puzzle together.

Object keys are unordered, so this is in no way reliable.

Jack Bashford
– Jack Bashford

2019-08-25 13:20:26 +00:00
Commented Aug 25, 2019 at 13:20 — Jack Bashford
– Jack Bashford, Commented Aug 25, 2019 at 13:20

CertainPerformance · Accepted Answer · 2019-08-25 13:22:07Z

3

Collect the object values into an array, then increment an index with modulo on every click:

const vals = Object.values(theme);
let i = 0;
themeToggle.addEventListener('click', () => {
  map.setOptions({styles: vals[i]});
  i = (i + 1) % vals.length;
});

While most environments will result in an object's Object.values in ascending numeric followed by insertion order, it's not guaranteed. If you need a guaranteed predictable ordering, use Reflect.ownKeys (or Object.getOwnPropertyNames) instead:

const vals = Reflect.ownKeys(theme)
  .map(key => theme[key]);

answered Aug 25, 2019 at 13:22

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

1 Comment

Deep Over a year ago

Thanks for the explanation. After doing testing and using console log , it really helped me understand how that is working. :D

ANIK ISLAM SHOJIB · Accepted Answer · 2019-08-25 13:27:43Z

-1

You can loop through an object like this

var invoice = {
  name: 'anik',
  age: 29,
  designation: 'Full Stack Developer'
}

Object.keys(invoice).map((d,i)=>{                 
  console.log(d +' : '+invoice[d]);
})

answered Aug 25, 2019 at 13:27

ANIK ISLAM SHOJIB

3,3383 gold badges31 silver badges48 bronze badges

Collectives™ on Stack Overflow

On click, loop through each object key

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related