CODEWITHSUNDEEP
javascriptjqueryarrays
jonmrich
jonmrich

Reputation: 4323

Dynamically generate arrays with variable names and strings

I'm using a set of arrays to populate some radio selects on a page

//holds the set value of the variable
var universalVariables = [thing1, thing2, thing3]; 
//used for the classes in the radios to get values later
var universalNames = ['thing1','thing2','thing3']; 
//used to put a label on each radio
var universalAttributes = ['THING ONE', 'THING TWO', 'THING THREE'];

Followed by:

$.each(universalVariables, function(index, val) {
  $('#universalAttributes').append('<br />' + universalAttributes[index] + '<br /><div class="radio"><label><input type="radio" name="' + universalNames[index] + '" value="false">FALSE</label></div><div class="radio"><label><input type="radio" name="' + universalNames[index] + '" value="true">TRUE</label></div>')
});

//set data
$.each(universalVariables, function(index, val) {
  if (universalVariables[index] == false) {
    $("input[name=" + universalNames[index] + "][value=false]").prop('checked', true);
  } else if (universalVariables[index] == true) {
    $("input[name=" + universalNames[index] + "][value=true]").prop('checked', true);
  }
});

This creates three (because there are three variables in my arrays) radios, but obviously can handle as many as you want. All you need to do is supply the information in the arrays (versus coding the radio selects themselves).

The three pieces of information here

The problem comes in when you have to add a variable. Ideally, I'd like to generate the first two arrays. I could supply the list of words and then generate. The trick (for me anyway) is doing this where one array has string names and the other needs the variable NAMES not the variable VALUES.

There has to be a simple way of doing this. Open to any suggestions.

Upvotes: 0

Views: 62

Answers (1)

mhodges
mhodges

Reputation: 11116

You can store the "metadata" of the variables in an object, and access them by a key that matches up with the variable name, like so:

You can also set the checked property at the same time you append the input to the container, eliminating the need for that second loop. 

var universalVariables = {
  "thing1": {
    value: true,
    attribute: "THING ONE"
  },
  "thing2": {
    value: false,
    attribute: "THING TWO"
  },
  "thing3": {
    value: true,
    attribute: "THING THREE"
  },
};
// used so we can guarantee correct sequential order
var universalNames = ['thing1','thing2','thing3']; 

$.each(universalNames, function(index, name) {
  var objVar = universalVariables[name];
  $('#universalAttributes')
    .append('<br />' + objVar.attribute + 
            '<br /><div class="radio"><label><input type="radio" name="' + name + 
            '" value="false"' + (objVar.value ? '' : 'checked') + '>FALSE</label></div><div class="radio"><label><input type="radio" name="' + name + 
            '" value="true"' + (objVar.value ? 'checked' : '') + '>TRUE</label></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="universalAttributes"></div>

Upvotes: 1

Related Questions