How to use a javascript strings object

Question

I'm having a problem utilizing my language files.

Currently, I have a language file where I have an object like

var strings {
    title: "Title",
    subtitle: "Subtitle"
};

In my html currently, I'll have something like

<div id="title">Title</div>
<div id="subtitle">Subtitle</div>

Now I want to include inside the div the value from a javascript object instead, so that I can use various language files. The relevant language file is chosen in the backend by a php script, and isn't the issue here.

Eg

<div id="title">strings.title</div>
<div id="subtitle">strings.subtitle</div>

Is there an easy way to do this? I don't want to have to use php to create the necessary js file every single time, or use a jquery loop that populates every single div value on create, though right now it looks like that's what I'll have to do.'

Thanks

I think you have to provide a more complete example. How do you store different language information? How do you combine them with your HTML? How do you know which div has to contain which value? etc. It looks to me like you want a template engine with i18n support. — Felix Kling, Jan 31 '12 at 00:02
@FelixKling Thanks I updated the question. I'm pretty sure I don't want a template engine if I can avoid it at all possible. — saccharine, Jan 31 '12 at 01:49

score 1 · Answer 1 · answered Jan 31 '12 at 00:19

1

Assuming you have this:

<script>
  var myJSVar = 'Hello, World!';
</script>

You could directly output it:

<script>
  document.write('<div>' + myJSVar + '</div>');
</script>

You can attach it to the BOM:

<script>
  var div = document.createElement('div');
  div.innerHTML = myJSVar;
  document.getElementsByName('body')[0].appendChild(div);
</script>

You can populate the div based on an ID:

<div id="foo"></div>

<script>
  document.getElementById('foo').innerHTML = myJSVar;
</script>

Or any other numerous options. It really depends on what you're going for, though right now you're being pretty vague.

answered Jan 31 '12 at 00:19

Brad Christie

100,477
16
156
200

I really don't want to use document.write, and I posted this question because I wanted to avoid populating the div based on id, or attaching it to a BOM if at all possible. I updated my question to better explain what I'm looking for. I'm hoping for some kind of function that allows me to print the value of a variable inside a div tag. – saccharine Jan 31 '12 at 01:51
how about `for (var s in strings) { var el = document.getElementById(s); if (el) el.innerHTML = strings[s]; }` ? Then just make sure every element is ID'd with a property found in `strings` object. – Brad Christie Jan 31 '12 at 01:54
Thanks for the help. I ended up using class as an identifier, adding an extra "translate" class to everything that contained strings I wanted translated. I'm also thinking about using a custom "translate" attribute, but I've heard that we're not supposed to do that. – saccharine Jan 31 '12 at 03:14
@saccharine: "Custom" attributes are probably not a good route, no. However, you could use data attributes like `data-translate="strings.title"` and use the `.data()` method in jQuery. – Brad Christie Jan 31 '12 at 03:41
Thanks for the tip. Data attributes seem really useful. I think I'll give it a shot. How should I use the .data method? I was thinking more of selection all with a certain attribute. I'm not seeing how I can translate using .data(). – saccharine Jan 31 '12 at 04:25
@saccharine: try using something like a [data attribute selector](http://stackoverflow.com/questions/2891452/jquery-data-selector). – Brad Christie Jan 31 '12 at 04:28

score 1 · Accepted Answer · answered Jan 31 '12 at 02:15

HTML

<div id="title">strings.title</div>
<div id="subtitle">strings.subtitle</div>

JS

// this is what you get from the language file
var LanguageStorage = {
  strings: {
    title: "Title",
    subtitle: "Subtitle"
  }
}


// function for replace language
function placeLanguageFor(selector) {
  var thiz = $(selector);
  var lidArray = thiz.text().split("\.");
  thiz.text(LanguageStorage[lidArray[0]][lidArray[1]]);
}

// show text based on language
placeLanguageFor("#title");
placeLanguageFor("#subtitle");

Here is your code http://jsfiddle.net/hq86p/

Thanks for your help. I decided in the end that the best way would be to add an identifier to every div with a string that needed to be translated, either as a class or as a separate attribute, and then run a script similar to what you showed me. — saccharine, Jan 31 '12 at 03:13

How to use a javascript strings object

2 Answers2