My application creates a table by iterating through the events using #each events.
Each row in the table represents an event and contains 4 event tickets. When a user clicks on a ticket, a function is executed. For example, when the first ticket is clicked:
Template.displayEventsTable.events({
"click .buyTicket1": function () {
buyEventTicket(1, this._id);
}
This is the buyTicket function:
function buyEventTicket (ticketNumber, eventID) {
var buyer = Meteor.user();
console.log(ticketNumber); // works
console.log(eventID); // works
console.log(eventID.eventTicketPrice); // currently returns "undefined"
};
}
I am struggling to retrieve the eventTicketPrice, which is currently undefined. Despite going through the Meteor and HandleBars documentation, I have not been able to figure out the issue.
It seems illogical that the event ID is not returning the correct value for one of its fields.
What am I missing?
EDIT 1
HTML Template
<template name="myEvents">
<h2>Events</h3>
<table>
<tr class="first-row">
<th>Ticket 1</th>
<th>Ticket 2</th>
<th>Ticket 3</th>
<th>Ticket 4</th>
</tr>
{{#each events}}
{{#if eventsTypeA 1}}
{{> displayEventsTable}}
{{/if}}
{{/each}}
</table>
</div>
</div>
</template>
Events Table Template
<template name="displayEventsTable">
<tr>
<td><button class="buyTicket1 button-blue">Buy #1</button></td>
<td><button class="buyTicket2 button-blue">Buy #2</button></td>
<td><button class="buyTicket3 button-blue">Buy #3</button></td>
<td><button class="buyTicket4 button-blue">Buy #4</button></td>
</tr>
</template>
EDIT 2
_id: "YQXvUoBGKvhPObzFw"
createdAt: Sat Jan 02 2016 22:47:35 GMT+0100 (CET)
eventStatus: "open"
eventTicketPrice: 30
eventTickets: Array[4]
__proto__: Object