Access json element from javascript

Question

I have this JSON, which uses the i18next for i18n a website which uses blade as the templating engine :

"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": ""}
                }
            ]
        }
    }
}

In my javascript, I am trying to access the contents list, depending on the index number.

This is what I have so far:

  // Load page
  $('a.nav-link').on('click', function( event ) {
      event.preventDefault();
      var $this = $(this);
      var section =  $this.closest('ul').prev('h3').find('span[data-content]').data('content');
      var subSection = $this.attr("data-content");
      // we can now genrate the section content and push this into the tmpl.
      blade.Runtime.loadTemplate("guide_section.blade", function(err, tmpl) {
          tmpl({
              'sections': {
                  'section': section,
                  'subsection': subSection
              }
          }, function(err, html) {
              if(err) throw err;
                  console.log(html);
                  $('.mainarticle > .content').empty().html(html);
          });
      });
  });

and in my template:

#guide_section
    - var i = sections.section
    - var c = sections.subsection
    h5(data-i18n="guide.sections."+i+".title")=i
        h4(data-i18n="guide.sections."+i+".contents.title")=c

The above code is very similar to jade's template.

The H5 works fine, in that it returns the title, but I am not sure how to return the n-th element for the contents lists.

For example:

h5(data-i18n="guide.sections."+i+".title")=i

renders as

<h5 data-i18n="guide.sections.the-basics.title">the-basics</h5 

which is correct, as then i18next looks up the translation.json and sets the correct translation based on the data-i18n value, but

data-i18n="guide.sections."+i+".contents.title"

renders as

<h4 data-i18n="guide.sections.the-basics.contents[0]">0</h4

but contents in this case has two entries such as:

[{
    "title": "Introduction",
    "content": {"p1": "", "p2": "", "p3": ""}
},{
    "title": "A Chapter in the Zeitgeist Movement",
    "content": {"p1": "", "p2": "", "p3": ""}
}]

So how do I change my script so that by giving the index, I can access the title of the contents list?

Answer 1

this works, taken from http://i18next.com/pages/doc_features.html#objecttree , so in my case 'content' is an array

ul.sub-section
    - var content = t("guide.sections."+i+".contents", { returnObjectTrees: true });
    - for(var c in content)
        - var section_title = t(content[c].title)
        li
            a.nav-link(href="#" data-bind=""+c data-content=""+section_title data-i18n="guide.sections."+i+".contents.title")=t(content[c].title)