获取与下拉选项对应的 JSON 数据答案

【问题标题】：Fetch JSON data corresponding to drop down choice获取与下拉选项对应的 JSON 数据
【发布时间】：2017-10-25 04:05:13
【问题描述】：

我会尽量解释清楚。

只是指出我正在使用 Meteor 来构建我的应用程序。

在我的项目中，我的文件结构如下所示：

/imports/both/

在这个结构中，我有各种 .js 文件，其中包含我想在我的应用程序中显示的各种数据位。每个 .js 看起来像这样：

import { Mongo } from 'meteor/mongo';

export const George = {
  "George" : {
    "Age" : 20,
    "Gender" : "Male",
    "Height" : "6ft 3in",
    "Weight" : "12.6st"
  }
}

然后在我的应用程序的主 javascript 文件中，我调用了各种文件，如下所示：

import { George } from '/imports/both/george';

在我的 javascript 文件中我也有这一行：

const data = George;
console.log(data);

运行应用程序时，控制台显示以下内容：

Log of the data

这很棒，它可以按预期将数据打印到控制台。

现在这是我需要帮助的地方！

由于我想要向用户显示各种数据，我在我的应用程序中添加了一个下拉框，其中包含要显示的不同文件名。当用户点击一个选项时，它应该显示与该选项名称相关的数据。

var SelectPerson = document.getElementById('SelectPerson');

SelectPerson.onchange = function(){
  choice = SelectPerson.value;
  
  const data = choice;
  console.log(data);
  
};
SelectPerson.onchange();

<select name="SelectPerson" id="SelectPerson">
  <option value="George">George</option>
  <option value="John">John</option>
  <option value="Frank">Frank</option>
  <option value="Dave">Dave</option>
</select>

此代码显示了一个基本下拉菜单，每次选择新值时都会更新控制台 - 但谁能告诉我如何做到这一点，以便选择下拉值将从我的导入文件夹中调用相关数据？

在此先感谢

【问题讨论】：

const alldata = {George: George}，然后在onchange const data = alldata[choice]，但我要问你用的是什么客户端框架？

标签： javascript jquery meteor

【解决方案1】：

您可以使用Spacebars 模板轻松完成此操作。您的客户端 javascript 需要这样的对象：

const data = {
   "George" : George
   "John" : John
}

然后，您可以轻松地从这些数据动态创建一个下拉列表，并将其输入到您的视图中，如 here 所述。

【讨论】：