Working HTML tags from JavaScript file (JSON jQuery?)

Question

I am pulling a text from a JavaScript file but the HTML tags don't work.

I followed the best answer here and ran into that problem:
Build multiple language website using jQuery and JSON based methods

This is the part of the JavaScript file:

    var arrLang = {
    "en-gb": {
        "HOME": "Home",
        "ABOUT": "About 
 Us",
        "CONTACT": "Contact Us",
    },
    "zh-tw": {
        "HOME": "首頁",
        "ABOUT": "關於我們",
        "CONTACT": "聯絡我們",
    }
}; 
    
    // The default language is English
    var lang = localStorage.getItem('lang') || navigator.language.slice(0, 2);
    if (!Object.keys(arrLang).includes(lang)){
        lang = 'en';
    }
    // Check for localStorage support
    if('localStorage' in window){
       
       var usrLang = localStorage.getItem('uiLang');
       if(usrLang) {
           lang = usrLang;
       }
    
    }
    
    
    console.log(lang);
    
            $(document).ready(function() {
                 "use strict";
              $(".lang").each(function() {
                $(this).text(arrLang[lang][$(this).attr("key")]);
              });
            });
    
            // get/set the selected language
            $(".language-button").click(function() {
                 "use strict";
              var lang = $(this).attr("id");
              localStorage.setItem('lang', $(this).attr("id"));
              
    
              // update localStorage key
              if('localStorage' in window){
                   localStorage.setItem('uiLang', lang);
                   console.log( localStorage.getItem('uiLang') );
              }
    
              $(".lang").each(function() {
                $(this).text(arrLang[lang][$(this).attr("key")]);
              });
            });

HTML: This is how I pull the Text:

HTML: Expected result:

About
Us

HTML: This is what I get:

About 
 Us

What is a very simple way to make the HTML tags work in this case?

user_11511444 · Answer

If you use use .innerText in your JavaScript file to put the values into the HTML file, you might want to use .innerHTML instead. This will help if you have tags (like the tag in your situation) in your values.

If you use something else to put the values into the HTML file, please clarify which method you use...

You can find more information about innerHTML vs innerText here.

balexandre_28004 · Answer

you're not specifying how you do the replacement, but given your data

var arrLang = {
  "en": {
    "HOME": "Home",
    "ABOUT": "About 
 Us",
    "CONTACT": "Contact Us",
  },
};

you could simply have:

var arrLang = {
  "en": {
    "HOME": "Home",
    "ABOUT": "About 
 Us",
    "CONTACT": "Contact Us",
  },
};

var languageSelected = 'en';
var langData = arrLang[languageSelected];

// for each key in your object
Object.keys(langData).forEach(k => {
  // search for attribute "key" and add string as HTML
  $(`[key=${k}]`).html(langData[k]);
});

Working HTML tags from JavaScript file (JSON jQuery?)

2 Answers