从 javascript 访问 json 元素答案

【问题标题】：Access json element from javascript从 javascript 访问 json 元素
【发布时间】：2013-02-05 13:13:53
【问题描述】：

我有这个 JSON，它使用 i18next 为 i18n 一个使用刀片作为 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": ""}
                }
            ]
        }
    }
}

在我的 javascript 中，我正在尝试访问内容列表，具体取决于索引号。

这是我目前所拥有的：

  // 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);
          });
      });
  });

在我的模板中：

#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

上面的代码和jade的模板很相似。

H5 工作正常，因为它返回标题，但我不确定如何返回内容列表的第 n 个元素。

例如：

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

呈现为

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

这是正确的，因为 i18next 会查找 translation.json 并根据 data-i18n 值设置正确的翻译，但是

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

呈现为

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

但contents 在这种情况下有两个条目，例如：

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

那么如何更改我的脚本，以便通过提供索引，我可以访问contents 列表的标题？

【问题讨论】：

标签： javascript jquery internationalization node-blade

【解决方案1】：

这行得通，取自 http://i18next.com/pages/doc_features.html#objecttree，所以在我的例子中，“内容”是一个数组

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)

【讨论】：