Get only specific values using labels from headers in table

[konvas]

Hi I am stuck here, and this is my first Meteor/JS project so I need some help to get this done. I would like to get only specific values from the table by using their header names/labels. For example, I have this below and I would like to get only voice_one voice_two etc. values every time I click on each voice column.

My event looks like this right now, which works fine but what I would like to add in the function is to be able to get the voice values, I thought something like this ‘par.voice_one’ would do the trick, but it will only provide the string of the event which was clicked.

See some possible implementation in the event.

 'click #matrix-input': function(event, template){
            var selected = template.findAll("input[type=checkbox]:checked");
            var par = $(event.target).attr('class');
            var fieldValue = event.target.value;
            if(par !== ""){
                var envelope = {};
                envelope[par] = specs[par](fieldValue);
                polySynth.set({
                    "envelope" : envelope
                });
                polySynth.triggerAttack([par.voice_one, par.voice_two, par.voice_three]); /* only for demo reasons of what I would like to achieve.*/
                polySynth.set(par, specs[par](Number(fieldValue)));
                console.log(polySynth);
            }
        }

[baris]

Why you don’t just cycle trough rows and cells of the table using jquery?

[robfallows]

I suggested a way you could achieve this here:

How to create a dynamic table with checkboxes

Instead of writing your rows like this: <td>{{item[field]}} <input type="checkbox" value={{item[field]}}></td> write them like this: <td class="{{field}}">{{item[field]}} <input type="checkbox" value={{item[field]}}></td> and use $(event.target).attr('class') in your Template.ipsosboard.events to get the class: which will be your field name. Edit: you may have to put that class="{{field}}" on the input instead. Just leaving for the day, so I’m out of time!

Which requires you to write the headers as meta-data against each cell when you generate the HTML. It’s then really easy to get those values directly,

[konvas]

But this is what I do below right?
<td>{{item[field]}} <input class="{{field}}" type="radio" name="{{field}}" data-item="{{item._id}}" data-field="{{field}}" value={{item[field]}}></td>

[robfallows]

par is the header value (voice_one, voice_two …) - the value of field in your html?

I would probably use the data-field in preference to class (event.target.dataset.field), but that’s only because you may want to add more classes to your html and it will become messy to extract the one you want.

However, the principle is correct.

Looking at envelope[par] = specs[par](fieldValue); - is specs is an object containing function definitions like:

{
  attack(param) {
    // some code
  },
  decay(param) {
    // some code
  },
  // and so on
}

Have I understood that?

I would like to get only specific values from the table by using their header names/labels. For example, I have this below and I would like to get only voice_one voice_two etc. values every time I click on each voice column.

Can you explain this by example, please?

[konvas]

Looking at envelope[par] = specspar; - is specs is an object containing function definitions like:

Yes, that is correct. It’s mainly definitions for scaling the value from my table before it hits the mapped parameter of the synth. Thus I am using another lib for this, see below:

let scaleValue = require('scale-value');

const specs = {
    attack: scaleValue(0, 1, 0.001, 0.99),
    decay: scaleValue(0, 1, 0.1, 2.0),
    sustain: scaleValue(0, 1, 0.1, 1.0),
    release: scaleValue(0, 1, 0.1, 1.0),
    gain: scaleValue(0, 1, 0.1, 0.1),
    modulationIndex: scaleValue(0, 1, 1.0, 20.0),
    detune: scaleValue(0, 1, 1, 10),
    voices: scaleValue(0, 1, 120, 1220.0),
    harmonicity: scaleValue(0, 1, 0.1, 100),
    frequency: scaleValue(0, 1, 220, 1220),
    partials: scaleValue(0, 1, 1, 10),
    voice_one: scaleValue(0, 1, 1200, 2220.0),
    voice_two: scaleValue(0, 1, 1200, 2220.0),
    voice_three: scaleValue(0, 1, 1200, 2220.0),
    voice_four: scaleValue(0, 1, 120, 2220.0)
};

export default specs;

Can you explain this by example, please?

I have found a workaround to achieve this but given my lack of experience I am guessing this is not really the best way to do it.

'click #matrix-input': function(event, template){
            var selected = template.findAll("input[type=checkbox]:checked");
            var par = $(event.target).attr('class');
            var fieldValue = event.target.value;

            var voice_one = template.find('input[name*="voice_one"]:checked'),
                voice_two =  template.find('input[name*="voice_two"]:checked'),
                voice_three = template.find('input[name*="voice_three"]:checked');
            console.log(voice_one.value);
            console.log(voice_two.value);
            console.log(voice_three.value);

            if(par !== ""){
                var envelope = {};
                envelope[par] = specs[par](fieldValue);
                polySynth.set({
                    "envelope" : envelope
                });
            }
        }

I bet this looks a bit clumsy and there must be a much preferable way to get the values from each par specifically when checked. Like for example, to get the checked from the columns of voice_one voice_two etc.