i am using i18next to localize a website, on my /locales/dev/translation.json i have the following:
"guide": {
"sections": {
"the-basics": {"title": "The Basics",
"contents": [{"title": "Introduction",
"content": {"p1": "", "p2": "", "p3": ""}}
,{"title": "A Chapter in the Zeitgeist Movement",
"content": {"p1": "", "p2": "", "p3": ""}}
]
}
,"setting-up-a-national-chapter": {"title": "Setting up a National Chapter",
"contents": [{"title": "Gathering Volunteers & Social Media",
"content": {"p1": "", "p2": "", "p3": ""}}
]
}
}
}
and my template is like:
aside#nav-container(role="complementary")
nav#primary-nav.overview(role="nav")
- for(var i in items)
h3.section
span.menu-toggle
span(data-content=""+i data-i18n="guide.sections."+i+".title")=i18n.t("guide.sections."+i+".title")
ul.sub-section
- var contents = items[i].contents
- for(var c in contents)
li
- console.log(contents[c].title) // returns the correct item title
a.nav-link(href="#" data-content=""+c data-i18n="guide.sections."+i+".contents.title")=i18n.t("guide.sections."+i+".contents.title")
this just returns "guide.sections."+i+".contents.title"
the issue is that "guide.sections."+i+".contents" is an Object with one or more items!
when i inspect the code, i get the following:
<ul class="sub-section active"><li><a href="#" class="nav-link" data-content="0" data-i18n="guide.sections.the-basics.contents.title">guide.sections.the-basics.contents.title</a></li><li><a href="#" class="nav-link" data-content="1" data-i18n="guide.sections.the-basics.contents.title">guide.sections.the-basics.contents.title</a></li></ul>
i have enabled .sub-section.i18n()
what is the correct way to make i18next display the correct translation item?
any advise much appreciated.
guide.sections.the-basics.contents.title will return the object {"p1": "", "p2": "", "p3": ""} only if you enable returning objects:
http://i18next.com/pages/doc_features.html#objecttree
to parse this object (multiple paragraphs) proper you will need to add a postprocessor converting the object to valid html: