ドロップダウンの選択肢に対応するJSONデータを取得してください

Question

私はこれをできる限り明確に説明します。

メテオールを使用してアプリケーションを構築しています。私は自分のアプリケーションで表示したいデータの様々なビットを含む様々の.jsファイルがあり、この構造内

/imports/both/ 

：私はこのようなファイル構造を持っている私のプロジェクトの中で

。各.jsファイルは次のようになります。

import { Mongo } from 'meteor/mongo'; 

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

その後、私はそうのようなさまざまなファイルに呼び出されているアプリケーションのための私のメインのJavaScriptファイルに：私のjavascriptのファイルでも

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

私はこのラインを持っています：

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>

このコードは、コンソールに新しい値が選択されるたびに更新するダウン基本的なドロップを示した - しかし、誰もが、私はそれがとても関連を呼び出しますドロップダウン値を選択作ることができる方法を助言することができます私のインポートフォルダからのデータはありますか？事前

Answer 1

で

多くのおかげであなたはSpacebarsテンプレートを使用して、非常に簡単にこれを行うことができます。あなたのクライアント側のJavaScriptは、このようなオブジェクトが必要になります

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

hereが説明するように、簡単に、このデータから動的にドロップダウンを作成し、あなたのビューにそれを養うことができます。