CODEWITHSUNDEEP
javascriptjsonmeteor
Marcus Reed
Marcus Reed

Reputation: 91

Populate a Select Drop Down in Meteor with JSON from a url?

How would you create a page of RECENT LOTTERY RESULTS using Meteor and the following JSON located at: LOTTERY DATA

The following code results in a successfull call to the data as evidenced in the console but I'm not savvy enough to figure out how to display this data onto a page in Meteor.

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

The console is logging the following:

[ {
  "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"
}

Initially just displaying any results to the page would be awesome. But ideally, I would like to be able to have a select drop down with all of the available draw_date(s) and when a user makes their selection, the winning_numbers would be displayed.

Can you please help me with this?

Upvotes: 2

Views: 729

Answers (2)

SG_
SG_

Reputation: 1336

You can call the server-side method in Template.rendered and create some html elements dynamically

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

Upvotes: 1

Mouser
Mouser

Reputation: 13304

This code will do that: I've used the result from your JSON as hard coded object since Meteor couldn't be loaded as an external library.

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>

Upvotes: 2

Related Questions