如何将 JSON 数据读入 Meteor 应用程序中的 HTML Select 元素？

Question

我想加载一些 "lookup table" 类型的内容，我已将其存储在我的 Meteor 应用程序中名为 "settings.json" 的文件中。 json 是：

[{
    "uccampus": [
      "UC Santa Cruz",
      "UC Berkeley",
      "UC Davis",
      "UC Irvine",
      "UC Los Angeles",
      "UC Merced",
      "UC Riverside",
      "UC San Diego",
      "UC San Francisco",
      "UC Santa Barbara"
    ]
}]

我想将此数据加载到名为 "tblTravelerInfo2" 的模板中，因此我在 .js 文件中获得了以下代码：

Template.tblTravelerInfo2.helpers({
  uccampuses: function(){
    return Meteor.settings.uccampuses;
  }
});

...在 html 文件的相应模板中：

<select name="selectcampus" id="selectcampus" title="Please select a campus">
    {{#each uccampus}}
      <option>{{what}}</option>
    {{/each}}
</select>

正如您可能猜到的那样，我不知道我把“{{what}}”作为占位符放在哪里。应该是什么？

更新

还是不行。现在这是我的 json:

[{
    "uccampus": [
    {name:"UC Santa Cruz"},
    {name:"UC Berkeley"},
    {name:"UC Davis"},
    {name:"UC Irvine"},
    {name:"UC Los Angeles"},
    {name:"UC Merced"},
    {name:"UC Riverside"},
    {name:"UC San Diego"},
    {name:"UC San Francisco"},
    {name:"UC Santa Barbara"}
    ]
}]

...这是帮手：

  Template.tblTravelerInfo2.helpers({
    uccampuses: function(){
      return Meteor.settings.uccampuses[0];
    }
  });

我也试过：

  Template.tblTravelerInfo2.helpers({
    uccampuses: function(){
      return Meteor.settings.uccampus[0];
    }
  });

...这是 HTML:

{{#each uccampus}}
    <option>{{name}}</option>
{{/each}}

我也试过这个 HTML:

{{#each uccampuses}}
    <option>{{uccampus.name}}</option>
{{/each}}

...但在这两种情况下，Select 选项均未填充。没有错误消息，但也没有人口。

更新 2

我用 "meteor --settings settings.json" 启动了应用程序，并在控制台中得到了这个：

C:\Meteor\scheduler>流星--设置settings.json [[[[[ C:\Meteor\scheduler ]]]]]

=> 启动代理。 => 开始 MongoDB。 => 错误阻止启动：

在准备运行时： settings.json: 解析错误读取设置文件

=> 您的应用程序有错误。等待文件更改。

这里是完整的设置文件：

"public"：{ "uccampus": [ {"name":"UC Santa Cruz"}, {"name":"UC Berkeley"}, {"name":"UC Davis"}, {"name":"UC Irvine"}, {"name":"UC Los Angeles"}, {"name":"UC Merced"}, {"name":"UC Riverside"}, {"name":"UC San Diego"}, {"name":"UC San Francisco"}, {"name":"UC Santa Barbara"} ] }

Answer 1

由于您是在客户端上访问 Meteor.settings，因此您需要将数据包含在 public 密钥中，如下所示：

settings.json

"public" : {
    "uccampus": [
    {"name":"UC Santa Cruz"},
    {"name":"UC Berkeley"},
    {"name":"UC Davis"},
    {"name":"UC Irvine"},
    {"name":"UC Los Angeles"},
    {"name":"UC Merced"},
    {"name":"UC Riverside"},
    {"name":"UC San Diego"},
    {"name":"UC San Francisco"},
    {"name":"UC Santa Barbara"}
    ]
}

在您的助手调用此 public 设置时，如下所示：

  uccampus: function(){
    return Meteor.settings.public.uccampus;
  }

最后在空格键中这样调用数据：

{{#each uccampus}}
    <option>{{name}}</option>
{{/each}}

Answer 2

你试过吗？

template.js:

Template.tblTravelerInfo2.helpers({
 uccampuses: function(){
   return Meteor.settings.uccampuses;
 }
});

template.html:

{{#each uccampuses}}
 <option>{{.}}</option>
{{/each}}

如何将 JSON 数据读入 Meteor 应用程序中的 HTML Select 元素？

How to read JSON data into an HTML Select Element in a Meteor app?

json

html-select

meteor

spacebars

meteor-helper

更新

更新 2