JS - Property Name Access

Question

I previously posted a version of this question (JS - Constructor referencing) and found out the answer within the duplicates, especially Access / process (nested) objects, arrays or JSON. From here, I'm still having a ridiculous amount of time getting this to work as intended.

Given the following example code:

    function f1(args) {
        this.defaults = {
            param1 : 100,
            param2 : 900;
        }
        this.ranges = {
            param1 : { min : 0, max : 500 },
            param2 : { min : 0, max : 1000 };
        }
        this.steps = {
            param1 : 50,
            param2 : 100;
        }
    var myF1 = new f1();

I've read up on the previous duplicates and learning accessing the unknown property names by:

    for (var propertyName in myF) {
        newName = propertyName;
    }

What I need to do is cycle through the function (or any function) and build HTML5 range inputs for the function (keep in mind that the parameter names will be greatly different or random, so I assume I need to loop for the key itself. So, in the case of f1/myF1, the generated HTML5 would be:

    param1: <input type="range" name="param1" min="0" max="500" steps="50" />
    param2: <input type="range" name="param2" min="0" max="1000" steps="100" />

Note: The values for range=, name=, min=, max= and step= are all dynamically generated from the function's properties.

I've tried looping for keys, calling for values and pretty much any other research and attempt I can, but I always end up with variables overwriting themselves and I'm guessing this is just more in the deep end than this amateur swimmer can figure out.

Also, realize that each parameter will have a defaults, ranges and steps, so it is not like we have to worry about THAT level of randomization or variation. Thank you SO-JS gurus!

Answer 1

First of all, there are two errors in your example.

1. the opening bracket of function f1(args) { is not closed.
2. the semicolons of the last entry in this.defaults and this.steps should not be there.

Following code should (relying on jQuery $) create two correctly working input elements of type range though the code strongly relies on the given data format. One input element is getting the value by looping myF1.steps properties and each name is tried on defaults and ranges. The helper function applyAttr safely accesses the values by another propertyName or direct value.

Working plunker

$(document).ready(function() {

  function f1(args) {
    this.defaults = {
        param1 : 100,
        param2 : 900
    }
    this.ranges = {
        param1 : { min : 0, max : 500 },
        param2 : { min : 0, max : 1000 }
    }
    this.steps = {
        param1 : 50,
        param2 : 100
    }
  }
  var myF1 = new f1();

  function applyAttr(inElem, data, propName) {
    if(data.hasOwnProperty(propName))
      inElem.prop(propName, data[propName]);
    else {
      inElem.prop(propName, data);
    }
  }

  for(var stepsProp in myF1.steps) {
    var inputElem = $('<input type="range"/>');
    inputElem.prop('step', myF1.steps[stepsProp]);
    if(myF1.defaults.hasOwnProperty(stepsProp)) {
      inputElem.prop('value', myF1.defaults[stepsProp]);
    }
    if(myF1.ranges.hasOwnProperty(stepsProp)) {
      applyAttr(inputElem, myF1.ranges[stepsProp], 'min');
      applyAttr(inputElem, myF1.ranges[stepsProp], 'max');
    }
    $('body').append(inputElem);
  }
});

Answer 2

It looks like you would rather iterate over the properties of myF1.defaults, myF1.ranges or myF1.steps, not over the properties of myF1 itself (because they are fixed).

I don't know what you have tried, but this is how you could create the DOM elements you want:

var myF1 = new f1();
var elements = [];

for (var param in myF1.ranges) {
    var input = document.createElement('input');
    input.type = 'range';
    input.name = param;
    input.min = myF1.ranges[param].min;
    input.max = myF1.ranges[param].max;
    input.step = myF1.steps[param];
    input.value = myF1.defaults[param];

    var span = document.createElement('span');
    span.appendChild(document.createTextNode(param + ': '));
    span.appendChild(input);
    elements.push(span);
}

Simply iterate over the properties of ranges and access the same properties of steps and defaults. Then you can do whatever you want with elements. DEMO