title: Place array/multiselect data in modal after successful Ajax
body: <p>I am making an Ajax call which returns an employee Name and Id. These are an array which I wish to make available in a multiselect box in a Modal pop up. I also wish to show selected value if possible?</p>
  
  <p>My console log shows:</p>
  
  <pre><code>Object {employees: Object}
  employees:Object
  data: Array(2)
  0: Object
  id: 1
  name: "Sam Test 1"
  __proto__: Object
  1: Object
  id: 2
  name: "Joe Test 2"
  __proto__: Object
  </code></pre>
  
  <p>My ajax call is as follows:</p>
  
  <pre><code>$(document).ready(function() {
    $('.editApptModal-button').click(function() {
      var appointmentID = $(this).attr('data-appointmentID');
      console.log(appointmentID);
      $.ajax({
        type: 'ajax',
        method: 'get',
        url: '/ajax',
        async: false,
        dataType: 'json',
        success: function(response) {
          console.log(response);
          $.each(response.employees.data, function(key, value) {
            $('select').append($("&lt;option/&gt;", {
              value: key,
              text: value
            }));
          });
  
          $('#editApptModal').modal('show');
        },
        error: function(response) {
          alert('Could not displaying data' + response);
        }
      });
    });
  });
  </code></pre>
  
  <p>So what do I need to do here to place id in option value and name in option text? </p>
  
  <pre><code>$.each(response.employee.data, function(key, value) {
    $('select').append($("&lt;option/&gt;", {
      value: key,
      text: value
    }));
  });
  </code></pre>
  
  <p>Update
  With <code>console.log(JSON.stringify(response));</code>:</p>
  
  <pre><code>{
      "employees": {
          "data": [{
              "id": 1,
              "name": "Sam Test 1"
          }, {
              "id": 2,
              "name": "Joe Test 2"
          }]
      }
  }
  </code></pre>
  
  <p>Select box</p>
  
  <pre><code>&lt;select multiple="multiple" name="employees" class="form-control search-select"&gt;    
    &lt;option value=""&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>