使用来自 url 的 JSON 在 Meteor 中填充 Select Drop Down？

Question

您将如何使用 Meteor 和位于以下位置的以下 JSON 创建一个包含近期彩票结果的页面： LOTTERY DATA

以下代码成功调用了控制台中显示的数据，但我不够精明，无法弄清楚如何在 Meteor 的页面上显示此数据。

Meteor.http.call("GET", "http://data.ny.gov/resource/d6yy-54nr.json", function (err, result){
my_json = result.content;
 console.log(my_json);
});

控制台正在记录以下内容：

[ {
  "draw_date" : "2015-01-17T00:00:00",
  "winning_numbers" : "15 16 23 27 36 09",
  "multiplier" : "2"
}
, {
  "draw_date" : "2015-01-14T00:00:00",
  "winning_numbers" : "02 04 10 41 53 22",
  "multiplier" : "5"
}
, {
  "draw_date" : "2015-01-10T00:00:00",
  "winning_numbers" : "02 09 19 28 29 19",
  "multiplier" : "5"
}

最初只是在页面上显示任何结果会很棒。但理想情况下，我希望能够有一个包含所有可用draw_date(s) 的下拉选择，并且当用户做出选择时，将显示wining_numbers。

你能帮我解决这个问题吗？

Answer 1

此代码将执行此操作： 我已将 JSON 的结果用作硬编码对象，因为 Meteor 无法作为外部库加载。

var showData = [ {
  "draw_date" : "2015-01-17T00:00:00",
  "winning_numbers" : "15 16 23 27 36 09",
  "multiplier" : "2"
}
, {
  "draw_date" : "2015-01-14T00:00:00",
  "winning_numbers" : "02 04 10 41 53 22",
  "multiplier" : "5"
}
, {
  "draw_date" : "2015-01-10T00:00:00",
  "winning_numbers" : "02 09 19 28 29 19",
  "multiplier" : "5"
}];

//set a default option to the select.
var html = "<option value='' disabled default>Select a date</option>";

//iterate over each lottery drawing and add it to the select.
//The date will be displayed, the index of the array element will be the value.
showData.forEach(function(element, index){
   var date = new Date(element.draw_date);
   html += "<option value='"+index+"'>"+ date.getDate() + "/" + (parseInt(date.getMonth())+1) + "/" + date.getFullYear()+ "</option>";
   
});

//insert the option into the select.
document.getElementById("selectDate").insertAdjacentHTML("beforeend", html);
//add an onchange event handler to the select.
document.getElementById("selectDate").addEventListener("change", displayWinningNumbers, false);

function displayWinningNumbers(e)
{
  //when a option is selected, test the value. If 0 or higher return the array entry with the winning numbers.
  if(e.target.value >= 0)
  {
     alert(showData[e.target.value].winning_numbers); 
  }
}

<select  id="selectDate">
  
</select>

Answer 2

可以调用Template.rendered中的服务端方法，动态创建一些html元素

 Template.resultsView.rendered=function(){
     Meteor.call('getData',function(err,result){
      if(err){
       //Error handling code
      }else{
       var myDynamicHtml = '<option value='' default>Select a date</option>';
       result.forEach(function(el,index){
          //create you dom elements with the parsed data on results
          // append to any container with specific id
           myDynamicHtml+= "<option value='"+ele.someProperty+"' </option>";
       });
      $('#idOfContainer').html(myDynamicHtml);
       //idOfContainer is the id of html elment in template resultView where you 
       //want show the parsed data in any(<select>) html element
      }
     }); 
 }