Sure. You could just have to change the way selectEvent() returns the data (due to the new structure) and create two new helpers returning the data you want in the same way as allMuons().
But I was thinking about another way to structure all of this. Save the new ātransformed dataā in the template, and then make the ācurrent eventā as a ReactiveVar too to simplify helpers and to get rid off selectEvent() and some duplicated code.
I also made the generation of <option> dynamic, depending on the events data.
I prefer this version. Tell me what do you think 
:
<template name="table">
<table>
<thead>
<tr>
<th> - </th>
{{ #each field in listParams }}
<th>{{ field }}</th>
{{ /each }}
</tr>
</thead>
<tbody>
{{ #each tupleMuon in getEventMuons }}
<tr>
{{ #let
indexTuple=@index
muonLabel=(getMuonLabel tupleMuon)
muonValue=(getMuonValue tupleMuon)
}}
<td><b>{{ muonLabel }}</b></td>
{{ #each field in listParams }}
<td>
{{ muonValue }}
<input type="radio" name="{{ field }}" class="{{ field }}" value="{{ muonValue }}"
data-item="{{ muonLabel }}-{{ field }}-{{ indexTuple }}" data-field="{{ field }}" />
</td>
{{ /each }}
{{ /let }}
</tr>
{{ /each }}
</tbody>
</table>
<div>Event number : {{ getEventNumber }}</div>
<div>Event date : {{ getEventData }}</div>
<select id="event-select">
{{ #each event in allEvents }}
<option value="{{ event.name }}">Load data for event #{{ event.number }}</option>
{{ /each }}
</select>
</template>
const EVENTS = {
event_one: {
number : 1111,
date_time: 'data time event #1',
muons : [
{ "pt": 11.1, "eta": 11.2, "phi": 11.3, "charge": 11.4 },
{ "pt": 11.5, "eta": 11.6, "phi": 11.7, "charge": 11.8 },
],
},
event_two: {
number : 2222,
date_time: 'data time event #2',
muons : [
{ "pt": 22.1, "eta": 22.2, "phi": 22.3, "charge": 22.4 },
{ "pt": 22.5, "eta": 22.6, "phi": 22.7, "charge": 22.8 },
],
},
event_three: {
number : 3333,
date_time: 'data time event #3',
muons : [
{ "pt": 33.1, "eta": 33.2, "phi": 33.3, "charge": 33.4 },
{ "pt": 33.5, "eta": 33.6, "phi": 33.7, "charge": 33.8 },
],
},
};
const transformData = function transformData( events ) {
const newDataObject = {};
for (let eventName in events ) {
const currentEvent = events[ eventName ];
// transform muons by creating tuples
const transformedMuons = [];
currentEvent.muons.forEach(function ( obj ) {
Object.keys( obj ).forEach(function ( key ) {
transformedMuons.push( [ key, obj[ key ] ] );
});
});
// copy event object into a new object,
// and override 'muons' key with our transformed muons data
newDataObject[ eventName ] = Object.assign( {}, currentEvent, {
muons: transformedMuons,
});
}
return newDataObject;
};
Template.table.onCreated(function () {
this.listParams = [
'attack', 'decay', 'sustain',
'release', 'detune', 'voice_one',
'voice_two', 'voice_three', 'voice_four',
];
// transform your data by creating tuples for each label/value
// [ [ 'labelA', labelA_value ], [ 'labelB', labelB_value ], ... ]
this.events = transformData( EVENTS );
// default event name not hard-coded
const defaultEventName = Object.keys( this.events )[ 0 ];
this.activeEventName = new ReactiveVar( defaultEventName );
this.activeEvent = new ReactiveVar();
this.autorun(() => {
// this will rerun each time its dependencies are changed (the ReactiveVar)
const eventName = this.activeEventName.get();
const linkedEvent = this.events[ eventName ];
this.activeEvent.set( linkedEvent );
});
});
Template.table.helpers({
listParams: () => Template.instance().listParams,
getEventMuons : () => Template.instance().activeEvent.get().muons,
getEventNumber: () => Template.instance().activeEvent.get().number,
getEventData : () => Template.instance().activeEvent.get().date_time,
getMuonLabel: ( tuple ) => tuple[ 0 ],
getMuonValue: ( tuple ) => tuple[ 1 ],
/**
* {{ #each }} can't loop over an Object
* http://blazejs.org/api/spacebars.html#Each
*
* @returns {Array}
*/
allEvents() {
const eventsObj = Template.instance().events;
const eventsArr = [];
for (let eventName in eventsObj) {
eventsArr.push({
name : eventName,
number: eventsObj[ eventName ].number,
});
}
return eventsArr;
},
});
Template.table.events({
'change #event-select'( event, tplInstance ) {
const selectedElem = event.currentTarget.selectedOptions[ 0 ];
tplInstance.activeEventName.set( selectedElem.value );
},
});
.
(yeah I remember you on āLearn MeteorJS properlyā).