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

Question

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.

Answer 1

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.