Is there a way to simplify this snippet?

Question

const navTitle = document.querySelectorAll(".nav-sec");
const subTitle = document.querySelector(".subtitle");
const artTexts = document.querySelectorAll(".art-text");
const sectionTitles = document.querySelectorAll(".section_title");
const footerContent = document.querySelector(".footer_content");
const projectsTitle = document.querySelectorAll(".title-project");
const projectsDescription = document.querySelectorAll(".desc-project");
const aboutTitle = document.querySelectorAll(".about_title");
const contactContent = document.querySelector(".contact_content");
const aboutContent = document.querySelectorAll(".about_content");

btnLang.addEventListener("click", () => {
  const attr = (btnEnglish.classList.contains("hiddden") ? btnPortuguese : btnEnglish).getAttribute("language");

  navTitle.forEach((el, index) => (el.textContent = data[attr].navbar[index]));
  sectionTitles.forEach((title, index) => (title.textContent = data[attr].navbar[index]));
  projectsTitle.forEach((project_titles, index) => (project_titles.textContent = data[attr].project_titles[index]));
  projectsDescription.forEach((project_description, index) => (project_description.textContent = data[attr].project_description[index]));
  aboutTitle.forEach((about_title, index) => (about_title.textContent = data[attr].about_title[index]));
  aboutContent.forEach((about_content, index) => (about_content.textContent = data[attr].about_content[index]));

  contactContent.textContent = data[attr].contact_content;
  subTitle.textContent = data[attr].subtitle;
  footerContent.textContent = data[attr].footer_content;
});

I'm a benninger and I know that when you are repeating yourself too much, you can probably simplify things. But how can I approach something like this code? DRY ftw.

Answer 1

Assuming you have the same number of array elements in data as matching elements in the DOM, one approach is to use an array of selectors, each of which is tied to the associated property name on the data. Iterate over the selectors and language properties, then loop over each element matching the selector to assign the same index from the language property.

const selectorsByLangProp = [
    ['navbar', '.nav-sec'],
    ['navbar', '.section_title'],
    ['project_titles', '.title-project'],
    ['project_description', '.desc-project'],
    ['about_title', '.about_title'],
    ['about_content', '.about_content'],
];
btnLang.addEventListener("click", () => {
  const attr = (btnEnglish.classList.contains("hiddden") ? btnPortuguese : btnEnglish).getAttribute("language");
  const langData = data[attr];
  for (const [langProp, selector] of selectorsByLangProp) {
    document.querySelectorAll(selector).forEach((elm, i) => {
        elm.textContent = langData[langProp][i];
    });
  }

  contactContent.textContent = langData.contact_content;
  subTitle.textContent = langData.subtitle;
  footerContent.textContent = langData.footer_content;
});

For larger, complicated pages, a nicer approach to this sort of thing would be to construct the HTML directly from the data, instead of having separate selectors and properties. For example, with React, one might be able to do something similar to the following:

const Page = ({ langData }) => (<>
  <div>{langData.subTitle}</div>
  {
    langData.sections.map((sectionData) => (
      <section>
        <div>{sectionData.project_title}</div>
        <div>{sectionData.project_description}</div>
      </section>
    ))
  }
  <footer>{langData.contact_content} {langData.footer_content}</footer>
</>);

(That isn't working code, but it's an example of what implementing this sort of thing could look like)