Dynamic mapping table

1

I have this table (screenshot) and I would like to make an event that will create an array or object or dictionary, whatever feels more convenient, that will provide key-value pairs with the mapped items of the head of table with the values inside the columns. For example, something like this: Array[attack:3.59408, decay:-1.50158, sustain:0.785895] would that be possible?

21

Here is my HTML that provides dynamically different data and parameters in my table:

 <table id="matrix-input" class="responsive-table-input-matrix">
		<thead>
        <tr>
            {{#each field in listParams}}
			      <th>{{field}}</th>
            {{/each}}
        </tr>
		</thead>

    <tbody>
        {{#each item in dataItems}}
		    <tr>
                   			{{#each field in listParams}}
			      <td>{{item[field]}} <input type="checkbox" value={{item[field]}}></td>
            {{/each}}
        </tr>
        {{/each}}
    </tbody>
	     </table>

And my event to do this so far not entirely succesfully is this:

 'click #matrix-input': function(event, template){
            //event.preventDefault();
            var selected = template.findAll("input[type=checkbox]:checked");
            var array = _.map(selected, function(item){
                return item.defaultValue;
            });
            console.log(array);
        }

So far I am getting just an array with the values I check in my table but not any parameters in the array from the head.

2

I would provide the field value to the input element so you can evaluate it in your click event and store it in a multidimensional hash, something like this

<td>{{item[field]}} <input type="checkbox" data-item="{{item._id}}" data-field="{{field}}" value={{item[field]}}></td>

And for the Template

Template.matrixInput.onCreated(function(){
 var instance = this;
 // you need to instantiate the matrix with the items and fields or the event handler will generate errors
 instance.matrix = { ... };
});
Template.matrixInput.events({
 'click #matrix-input': function(event, instance){
   var input = event.currentTarget;
   var item = input.dataset.item;
   var field = input.dataset.field;
   instance.matrix[item][field] = item.value;
 }
});
3

Hey thanks a lot, I will try this one and let you know, but before why does this gives an error saying missing } after property list. Also, if you don’t mind can you explain where is ‘matrix’ defined or instantiated?

12

I guess you mean instance.matrix = { }; which seems to fix it.

But I have now another problem, when I click a checkbox it says in the browser console “TypeError: item is undefined” and when I do console.log(item) in my event is says: undefined, any idea what is the problem here?

4

Because in my example ... was supposed to be replace by you with the existing data. You get the error since ... is the javascript spread operator. Just remove the three dots for now and see what you get.

5

I still get: “TypeError: item is undefined”

6

Then you must have done something else wrong. I just replicated the code and it works. I would need to see you code

7 
<td>{{item[field]}} <input class="{{field}}" type="radio" name="{{field}}" data-item="{{item._id}}" data-field="{{field}}" value={{item[field]}}></td>
 
 Template.ipsosboard.onCreated(function(){
        var instance = this;
        instance.matrix = { };
    });

'click #matrix-input': function(event, instance){
          var input = event.currentTarget;
          var item = input.dataset.item;
          var field = input.dataset.field;
          instance.matrix[item][field] = item.value;
          }
8

You need to attach the even handler to the input element and not the paren div