How to translate JavaScript strings dynamically?

Question

I need to dynamically translate 2 strings to Spanish in the following JS, namely "Date" and "Read more" if the html-document's language code is set to Spanish (html lang="es"):

$.each(data,function(post, postInfo) {
        jsonArray.push( postEntry + '<a href="' + postInfo.link + '" class="preview-title"><h2>' + postInfo.title + '</h2></a><div class="preview-meta">Date: ' + postInfo.date + '</div><p>' + postInfo.preview + '...</p><div class="read-more"><a href="' + postInfo.link + '" class="link-button">Read more</a></div>' + postFooter);
      });

I am unsure how to approach this in the best way.

Getting the language code as a string would probably work with this:

var languageCode = $('html').attr('lang');

And then you could implement a simple check like:

if (languageCode === 'es') {
 ...
} else {
 ...
}

Would appreciate your advice how to approach this.

Translation is typically done on the server, or before template generation. — zzzzBov
– zzzzBov, Commented Sep 12, 2016 at 19:35
Look into translation libraries. I've used i18next but there are bound to be more - these allow you to define translations for however many languages you want. In general, with internationalisation you'll have to only be storing keys that are going to be translated to either English or Spanish (or any other language you want to use). — VLAZ
– VLAZ, Commented Sep 12, 2016 at 19:35
check this question: stackoverflow.com/questions/4886319/… — MrMisery
– MrMisery, Commented Sep 12, 2016 at 19:36
Problem in this case is that this is part of an AJAX call, where most of the markup is generated in the JS... The outputted variables are all available translated from the server. It's just these couple of strings in the JS that need a translation... — user6655274
– user6655274, Commented Sep 12, 2016 at 19:42
I'd recommend using i18next.com instead of rolling your own. — user1726343
– user1726343, Commented Sep 12, 2016 at 19:54

naortor · Accepted Answer · 2016-09-12 19:42:29Z

1

if you only want to translate 2 kind of words - translation library might be overkill.

I would do something like

lang = {
    es : {
        readmore : 'Read More In Spanish',
        date     : 'Date in spanish'
    },
    en : {
        readmore : 'Read More',
        date     : 'Date'            
    }
}

var languageCode = $('html').attr('lang');

console.log(lang[languageCode].readmore)
console.log(lang[languageCode].date)

answered Sep 12, 2016 at 19:42

naortor

2,09714 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to translate JavaScript strings dynamically?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related