Get only specific values using labels from headers in table


#1

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.
29

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

#2

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


#3

I suggested a way you could achieve this here:

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,


#4

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>


#5

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?

Can you explain this by example, please?


#6

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;

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.