Как подключить JSON файлы для перевода строк HTML?

Question

[Anna1377]

Всем привет! Помогите реализовать перевод текста с помощью JSON/JS.
Есть html код:

<nav class="site-nav">
      <ul id="navigation">
        <li data-menuanchor="about-us">
          <a href="#about-us" data-lang="about_academy">Про академию</a>
        </li>
        <li data-menuanchor="what-we-offer">
          <a href="#what-we-offer" data-lang="proposal">Что мы предлагаем</a>
        </li>
        <li data-menuanchor="your-benefits">
          <a href="#your-benefits" data-lang="your_result">Что ты получишь</a>
        </li>
        <li data-menuanchor="our-blog">
          <a href="#our-blog" data-lang="blog">Блог</a>
        </li>
        <li data-menuanchor="testimonials">
          <a href="#testimonials" data-lang="feedback">Отзывы</a>
        </li>
        <li data-menuanchor="contacts">
          <a href="#contacts" data-lang="contacts">Контакты</a>
        </li>

        <div class="header__language" id="language">
          <a class="language__link">
            <button class="language" id="eng">ENG</button>
          </a>
          <a class="language__link">
            <button class="language" id="ru">RU</button>
          </a>
        </div>
      </ul>
    </nav>

Нужно с помощью JS к кнопкам RU и EN подключить два JSON файла (en.json и ru.json) для реализации перевода текста html.

Comments

[ProjectSoft]

Фриланс?
Где ваши попытки решения? Вы даже не знаете как.

[Anna1377]

ProjectSoft, Нет, не фриланс. Обучение. Не знаю как, поэтому и спрашиваю.

[Ch cgtj Hihf]

Fetch?Попробуйте через fetch получить текст из файла чтобы такое сделать вместо url нужно прописать путь к файлу ('/en.json'), а потом сортировка объекта и изменение html файла , я бы так сделал

[ProjectSoft]

Anna1377, хорошо, соглашусь.
Тогда вопрос:
Прочитайте заголовок вашего поста, посмотрите представленные данные. Хватает всего, чтобы решить вашу проблему?
Никто, кроме вас, не знает, как у вас всё вертится и крутится и почему именно так, а не иначе.

Вот поэтому и есть ощущение фриланса.

[Anna1377]

ProjectSoft, Этот код произвольный, мне просто нужно понимание как к кнопкам подвязать json файлы для перевода страницы html. Я понимаю, что есть ключи в json файлах, которые соответствуют ключам в html. Я не понимаю как подключить файлы к кнопкам и сделать перебор.

[Антон]

Anna1377, json файлы можно подгрузить точно так же, как сделать обращение к API на сервере (тот же fetch). В результате у вас будет какая-то функция, в которую попадёт этот json-файл.
Далее два подхода - 1 перебрать все ключи из файла и заменить содержимое html-тега на перевод или 2 - найти все элементы с атрибутом data-lang и по значению атрибута - получить перевод из json и заменить.
Перебрать ключи можно через Object.keys(json) - выдаст массив ключей, можно перебрать. Object.entries(json) - выдаст массив (кортежей вроде, зовётся) массивов из двух элементов, в одном будет ключ, в другой - значение.
Найти все элементы с атрибутом - document.QueySelectorAll
Заменить содержимое тега - el.innerHTML. У вас, вроде, нет вложенных тегов в элементах, где нужен перевод.
Это в самых общих чертах направление. Если какие-то вопросы по реализации будут - задавайте.