Language change with JSON

Question

I am developing a website and it will have two languages. For this, I have set up a JSON that changes the languages by clicking on select box of the corresponding language. However, the code does not work and does not show any error in the console.

Follows the code:

var arrLang = {
  'en' : {
      'home' : 'Home',
      'sobre' : 'About us',
      'equipe' : 'Team',
      'ferramentas' : 'Tools',
      'exchanges' : 'Supported Exchanges',
      'contato' : 'Contact',
  },
  'pt' : {
      'home' : 'Home',
      'sobre' : 'Quem somos',
      'equipe' : 'Equipe',
      'ferramentas' : 'Ferramentas',
      'exchanges' : 'Exchanges Suportadas',
      'contato' : 'Contato',
  }
};

$(function(){
  $('#year').change(function(){
      var lang = $(this).attr('id');

      $('.lang').each(function(index, element){
          $(this).text(arrLang[lang][$(this).attr('key')]);
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="language">
  <select id="year">
      <option value="pt" id="pt">PT</option>
      <option value="en" id="en">EN</option>
  </select>
</div>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active" data-menuanchor="home">
            <a class="nav-link lang" href="#home" key="home">Home</a>
        </li>

        <li class="nav-item"  data-menuanchor="quem-somos">
            <a class="nav-link lang" href="#quem-somos" key="sobre">Quem Somos</a>
        </li>

        <li class="nav-item"  data-menuanchor="equipe">
            <a class="nav-link lang" href="#equipe" key="equipe">Equipe</a>
        </li>

        <li class="nav-item"  data-menuanchor="ferramentas">
            <a class="nav-link lang" href="#ferramentas" key="ferramentas">Ferramentas</a>
        </li>

        <li class="nav-item"  data-menuanchor="exchanges">
            <a class="nav-link lang" href="#exchanges" key="exchanges">Exchanges Suportadas</a>
        </li>

        <li class="nav-item"  data-menuanchor="contato" key="contato">
            <a class="nav-link lang" href="#contato">Contato</a>
        </li>
    </ul>
</div>

Answer 1

The problem lies in this line of your Javascript code:

var lang = $(this).attr('id');

To capture the value of a select at the event change jQuery, just use the $(this).val().

Therefore, the correct is:

var lang = $(this).val();

And the final code:

var arrLang = {
  'en' : {
      'home' : 'Home',
      'sobre' : 'About us',
      'equipe' : 'Team',
      'ferramentas' : 'Tools',
      'exchanges' : 'Supported Exchanges',
      'contato' : 'Contact',
  },
  'pt' : {
      'home' : 'Home',
      'sobre' : 'Quem somos',
      'equipe' : 'Equipe',
      'ferramentas' : 'Ferramentas',
      'exchanges' : 'Exchanges Suportadas',
      'contato' : 'Contato',
  }
};

$(function(){
  $('#year').change(function(){
      var lang = $(this).val();

      $('.lang').each(function(index, element){
          $(this).text(arrLang[lang][$(this).attr('key')]);
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="language">
  <select id="year">
      <option value="pt" id="pt">PT</option>
      <option value="en" id="en">EN</option>
  </select>
</div>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active" data-menuanchor="home">
            <a class="nav-link lang" href="#home" key="home">Home</a>
        </li>

        <li class="nav-item"  data-menuanchor="quem-somos">
            <a class="nav-link lang" href="#quem-somos" key="sobre">Quem Somos</a>
        </li>

        <li class="nav-item"  data-menuanchor="equipe">
            <a class="nav-link lang" href="#equipe" key="equipe">Equipe</a>
        </li>

        <li class="nav-item"  data-menuanchor="ferramentas">
            <a class="nav-link lang" href="#ferramentas" key="ferramentas">Ferramentas</a>
        </li>

        <li class="nav-item"  data-menuanchor="exchanges">
            <a class="nav-link lang" href="#exchanges" key="exchanges">Exchanges Suportadas</a>
        </li>

        <li class="nav-item"  data-menuanchor="contato" key="contato">
            <a class="nav-link lang" href="#contato">Contato</a>
        </li>
    </ul>
</div>

---

Note in relation to attribute key

I wouldn’t use the attribute key to define the object key, since it is an invalid attribute according to the HTML5 specification. Instead of key, prefer to use data-key. :)