As I work on my Angular App and implement angular translate for dual language support, I've encountered an issue with accessing nested items within my JSON object.
After carefully constructing my JSON and verifying its validity, I attempt to retrieve data beyond the first level, only to receive undefined values.
For example, consider the structure of my angular translations JSON:
$translateProvider.translations('en', {
"SEARCH": {
"SEARCH" : "Recherce",
"ABILITY" : "Abilities",
"MANAGEMENT" : "Management Competencies",
"PERSONAL" : "Personal Suitability"
},
"ABILITIES": {
"TITLE" : "Test Title here",
"ADVISORY": {
"TITLE" : "Advisory Skills",
"QUESTIONS": [
{
"TYPE" : "A",
"LEVEL" : "45",
"DESCRIPTION" : "Can you tell me how awesome you are"
},
{
"TYPE" : "B",
"LEVEL" : "100",
"DESCRIPTION" : "Tell me about your wicked project"
}
]
}
},
"HEADLINE": "Oh No!",
"SUB_HEADLINE": "Looks like you are not amazing"
});
To access the JSON data, I first initialize it with:
list = $translateProvider.translations('en');
When checking if the data is correctly retrieved by outputting in the console, I run the following:
console.log(list);
var getTitle = list.HEADLINE;
var getSearch = list.SEARCH.ABILITY;
console.log(getSearch);
console.log(getTitle);
The results show a surprising inconsistency.
The 'list' displays the intended JSON array
Retrieving
HEADLINEyieldsOh No!However, attempting to access
list.SEARCH.ABILITYreturnsundefined
This raises the question of why this occurs, especially considering the deeper nesting of data under "ABILITIES".
Note that Angular Translate utilizes the syntax
{{ 'ABILITIES.ADVISORY.TITLE' | translate }}