Javascript foreach only appending last element

Question

I am trying to loop over a DOM element and add aria-labels to them.

  const dayAriaLabels = {
    Mo: 'Monday',
    Tu: 'Tuesday',
    We: 'Wednesday',
    Th: 'Thursday',
    Fr: 'Friday',
    Sa: 'Saturday',
    Su: 'Sunday',
  };

  setTimeout(() => {
    const selectDomElement = document.querySelectorAll('.MuiPickersCalendarHeader-dayLabel');
    if (!isEmpty(selectDomElement)) {
      selectDomElement.forEach((label) => {
        Object.entries(dayAriaLabels).forEach(([key, value]) => {
          label.setAttribute('aria-label', value);
        });
      });
    }
  }, 100);

However when I inspect the dom element this happens

As you can see only Sunday is added? What is happening here? why cant I add all of the days from the object?

Try using your browser’s [debug capabilities](//ali-dev.medium.com/how-to-easily-debug-in-javascript-5bac70f94f1a). See [What is a debugger and how can it help me diagnose problems?](/q/25385173/4642212). It’ll tell you immediately what’s going on. Find out what `label` is and what `value` is in the inner `forEach` callback. — Sebastian Simon, Dec 22 '22 at 13:42
For *each* DOM element, you loop through *each* day label, and *repeatedly* set the label on the current DOM element. So yeah, for each DOM element, only the last label you iterate over actually remains set, as it can only hold one label at a time. And you do this for each DOM element in turn… — deceze, Dec 22 '22 at 13:42

score 0 · Answer 1 · answered Dec 22 '22 at 13:44

You should only have one forEach like so :

  const dayAriaLabels = {
    Mo: 'Monday',
    Tu: 'Tuesday',
    We: 'Wednesday',
    Th: 'Thursday',
    Fr: 'Friday',
    Sa: 'Saturday',
    Su: 'Sunday',
  };

  setTimeout(() => {
    const selectDomElement = document.querySelectorAll('.MuiPickersCalendarHeader-dayLabel');
    if (!isEmpty(selectDomElement)) {
      selectDomElement.forEach((label) => {
        label.setAttribute('aria-label', dayAriaLabels[label.innerText]);
      });
    }
  }, 100);

And not loop over all days each time

Javascript foreach only appending last element

1 Answers1