how to convert a string to object's property which it's an object too

Question

I am doing a little multi language change, here is the code jsfiddle
html and jQuery:

var dict = {
 fr: {
   'hello' : 'Bonjour',
        'bye' : 'Au revoir'
  },
  en: {
   'hello' : 'Hello',
        'bye' : 'Bye'
  }
};

function text (lang){
 $('h1').html(dict.lang.hello);
        $('p').html(dict.lang.bye);
};

$('a').click(function (){
 var selected = $(this).attr('title');
        text(selected);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/" title="fr">fr</a>
<a href="#/" title="en">en</a>
<h1>Bonjour</h1>
<p>Au revoir</p>

What I want is: click the "en" or "fr" to change text from the "dict" object, I stored the "title" of the <a> tag, but when I put it to the function "text" as parameter, the console shows "TypeError: dict.lang is undefined", I understand that the var selected is a string, it can't not replace the "fr" and "en" in the object.
So here is the question:
how to convert a string to object's property which it's an object too?

Using brackets notation: `dict[lang].hello` https://jsfiddle.net/xra81qg6/12/ — A. Wolff, Sep 29 '16 at 08:36

score 2 · Accepted Answer · answered Sep 29 '16 at 08:36

2

Use it as dict[lang].hello and dict[lang].bye

var dict = {
 fr: {
   'hello' : 'Bonjour',
        'bye' : 'Au revoir'
  },
  en: {
   'hello' : 'Hello',
        'bye' : 'Bye'
  }
};

function text (lang){
 $('h1').html(dict[lang].hello);
        $('p').html(dict[lang].bye);
};

$('a').click(function (){
 var selected = $(this).attr('title');
        text(selected);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/" title="fr">fr</a>
<a href="#/" title="en">en</a>
<h1>Bonjour</h1>
<p>Au revoir</p>

answered Sep 29 '16 at 08:36

Shubham Khatri

270,417
55
406
400

It works ! Just a syntaxe error, I was into a complicate way. – Jiang Lan Sep 29 '16 at 08:53
No problem . Happy to help :) – Shubham Khatri Sep 29 '16 at 08:53

Fadhly Permata · Answer 2 · 2016-09-29T08:49:19.337

Since, there are not lang props on your dict variabel. so you need to remove it.

Refers from here, you can accessing props of object as associative array. as example: array["name"]["nameagain"].id;

so for your case, you can call it using: dict[lang] to get the object, or dict[lang].bye as particular data.

See my snippet below:

var dict = {
 fr: {
   'hello' : 'Bonjour',
        'bye' : 'Au revoir'
  },
  en: {
   'hello' : 'Hello',
        'bye' : 'Bye'
  }
};

function text (lang){
 $('h1').html(dict[lang].hello);
        $('p').html(dict[lang].bye);
};

$('a').click(function (){
 var selected = $(this).attr('title');
        text(selected);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/" title="fr">fr</a>
<a href="#/" title="en">en</a>
<h1>Bonjour</h1>
<p>Au revoir</p>

yes, it works ! Just a syntaxe error, I will remember this ! — Jiang Lan, Sep 29 '16 at 08:52

how to convert a string to object's property which it's an object too

2 Answers2