I'm having a little problem, i have a translations JSON variable. And i want to put it on HTML. Is there a way to make it somehow?

My JS file:

var Karting = Karting || {};

Karting = {

lang : 'lv',
translationsLV: {
    "Home" : "Ziņas",
},
}

And i want to do this:

My page is static and i'm not using any templating engines.

<li><a class="active" href="#">Karting.translationsLV['Home']</a></li>

EDIT:

Added this:

$(window).load( function() {
        var translations;
        if (Karting.lang=='lv')
        {
            translations = Karting.translationsLV;
        }
        else
        {
            translations = Karting.translationsENG;
        }
            }, false );

This doesn't show my element

document.write(translations['Home'])

UncaughtRefferenceError - translations is not defined

I'm having a little problem, i have a translations JSON variable. And i want to put it on HTML. Is there a way to make it somehow?

My JS file:

var Karting = Karting || {};

Karting = {

lang : 'lv',
translationsLV: {
    "Home" : "Ziņas",
},
}

And i want to do this:

My page is static and i'm not using any templating engines.

<li><a class="active" href="#">Karting.translationsLV['Home']</a></li>

EDIT:

Added this:

$(window).load( function() {
        var translations;
        if (Karting.lang=='lv')
        {
            translations = Karting.translationsLV;
        }
        else
        {
            translations = Karting.translationsENG;
        }
            }, false );

This doesn't show my element

document.write(translations['Home'])

UncaughtRefferenceError - translations is not defined

• javascript
• html
• dom

3 Answers 3

One way is to use document.write:

<li><a class="active" href="#"><script>document.write(Karting.translationsLV['Home'])</script></a></li>

Simply use innerHTML for this case.

var Karting = {
   lang : 'lv',
   translationsLV: {
      Home: "Ziņas"
   }
},
homeInfo = document.getElementById('homeInfo');
homeInfo.innerHTML = Karting.translationsLV.Home;

HTML:

<li><a id="homeInfo" class="active" href="#"></a></li>

First of all your JSON is not correct. There is an extra comma there. It should be

{
lang : 'lv',
translationsLV: {
   "Home" : "Ziņas",
}
}