Как подключить JSON файлы для перевода строк HTML?
Всем привет! Помогите реализовать перевод текста с помощью 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. Файлы json лежат в корне проекта.
{
"about_academy": "Про Академию",
"proposal": "Что мы предлагаем",
"your_result": "Что ты получишь",
"feedback": "Что говорят выпускники",
"blog": "Блог",
"contacts": "Контакты",
"our_mission_main": "Наша миссия"
}
{
"about_academy": "About the Academy",
"proposal": "What we propose",
"your_result": "What will you get",
"feedback": "What the graduates say",
"blog": "Blog",
"contacts": "Contacts",
"our_mission_main": "Our mission"
}