This is probably really simple but I can't get it to work to save my life.

I need to change a number of text inputs to select fields using AJAX and jQuery. All is working perfectly except when I try and use a variable with the `$.each` to process the response everything falls apart.

The AJAX response I get back is always JSON in the format of `{"RequestedValue":["Value 1","Value 2","Value 3"]}` so if I request values for "author" I receive `{"author":["A","B","C"]}` etc

If I request values for "author" `$.each(data.author, function(key, element) {` works perfectly to populate the select but ideally I want to reference the requested value or JSON response key so `.author` is dynamic based the values I have requested/received and the function `convertTextToSelect(objectProp)` can be reused.

I already have a variable storing the string of the requested value called `objectProp` but `$.each(data.objectProp, function(key, element) {` fails as well as other thing I have tried such as reading the key. The only way I have been able to successfully process the data is by hard coding the value. 

Still learning so any suggestions on any of the code much appreciated. Thanks

The simplified javascript and HTML files are as follows;

```js
/**
 * Change text fields to select values using data values applicable to the object
 */

$(document).ready(function() {
 convertTextToSelect("author");
 convertTextToSelect("book");
 // Lots more calls to be made here for other input names, logic dependant 
});

function convertTextToSelect(objectProp) {
 $.ajax({
  type : "GET",
  url : "https://URL?propertyName=" + objectProp,
  dataType : "json",
  success : function(data) {
  // Format of the returned data is always
  //      {" + objectProp + ":["Value1","Value2","Value3"]}
  // E.g  {"author":["A","B","C"]}

   // Replace the text input with a empty select with the a matching name and id value
   $("[type=text][name$=" + objectProp + "]").replaceWith("<select name=\"" + objectProp + "\" id=\"" + objectProp + "\"></select>");

   $.each(data.author, function(key, element) {  // How can I dynamically create 'data.author' 'data.book' etc to use in the $.each ? 
    $("#"+objectProp).append($('<option>', {value : element}).text(element));
   });
  },
  error : function() {
   alert("Failed to load");
  }
 });
}
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
 <title>Testing jQuery</title>
</head>
<body>
 <script type="text/javascript" src="jquery-1.11.3.js"></script>
 <script type="text/javascript" src="texttoselect.js"></script>
 <table>
  <tr>
   <td><label>Author:</label></td><td>
   <input name="author" type="text" size="60" maxlength="128" value="" tabindex="1">
   </td>
  </tr>
  <tr>
   <td><label>Book:</label></td><td>
   <input name="book" type="text" size="60" maxlength="128" value="" tabindex="1">
   </td>
  </tr>
 </table>
</body>
```