title: Accessing object values with generic method
body: <p>I'm doing some refactoring and trying to create a generic method which is able to populate given dropdowns with object data. However I'm coming up against an issue regarding how to make accessing different object data generic. For example:</p>
  
  <p>Original method</p>
  
  <pre><code>function populateDropdown(element, data) {
  for (var i = 0; i &lt; data.length; i++) 
      element.append('&lt;option value=' + data[i].ID + '&gt;' + data[i].Name + '&lt;/option&gt;');
  }
  </code></pre>
  
  <p>This works if a given array of objects has the field <code>ID</code> and <code>Name</code>. What I'm trying to achieve is something like this</p>
  
  <pre><code>function populateDropdown(element, data, valueField, dataField) {
  for (var i = 0; i &lt; data.length; i++) 
      element.append('&lt;option value=' + data[i].valueField + '&gt;' + data[i].dataField + '&lt;/option&gt;');
  }
  </code></pre>
  
  <p>When I've tried calling this method like this I get <code>Undefined</code> as a result: <code>populateDropdown($('#myDropdown'), dataArray, "ID", "DataType");</code></p>
  
  <p>And when I've tried without the <code>""</code> I get a console error saying that <code>ID</code> and <code>DataType</code> isn't defined. Is there a way to tell my method what fields I want from the object? </p>