[SOLVED] d3.js passing in dynamic variable name to d.properties method

d3.js passing in dynamic variable name to d.properties method

I've traditionally used d.properties.columnName to access an array of values in d3.js. But what if instead of hard-coding the field name, I want to pass it in as a variable ?

Example:

 //get current value of dropdown.
 //values will match field names in the d3.js dataset
 dropdown_val = document.getElementById('mySelect').value;
 //make empty array to hold values.
 value_array = []

 //function to read in dropdown value (user selects a field in the data) and push it's values to an array
 function updateBounds(points, dropdown_val) {

      points.features.forEach(function(d) {
          value_array.push(d.properties.dropdown_val) 
       })

     }

  //on dropdown change, call function and pass in dropdown_val as a variable
  document.getElementById('mySelect').onchange = function(){
      updateBounds(data, dropdown_val);
  }

However, d.properties.dropdown_val is showing up as undefined.

Solution

You need to wrap it in brackets:

points.features.forEach(function(d) {
   value_array.push(d.properties[dropdown_val]); 
});

In your current code you're only grabbing the value of the dropdown once at the beginning. You should move the dropdown_val = document.getElementById('mySelect').value into the onchange function.