title: php/ajax JSON respone returns [object, Object] once parsed
body: <p>When I try to parse a response from an AJAX request as JSON, I get [object, Object] values instead of the actual ones returned before parsing the response. What could I have done wrong?</p>
  
  <p>I have one script named "apply.php" which has the a short application and an AJAX request called when the user selects a town. There is another script named "suburb.php" which retrieves stored suburbs in the database that are under the selected town. The second script is called when the users selects/changes a town.</p>
  
  <p>In the "apply.php" script I have a JavaScript alert that display the response, which I then parses as JSON. After passing the response, [object, Object] is returned instead of the actual values, thus disabling me from reading the JSON key values.</p>
  
  <p>Using the values without parsing them does not help either. I tried checking for question that relate to my problem without any luck.</p>
  
  <p>Your assistance will be greatly appreciated.</p>
  
  <p>apply.php</p>
  
  <pre><code>&lt;?php
  $dbcon = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
  ?&gt;
  &lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Accomodation Application&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;style&gt;
  form div {
      margin-bottom: 20px;
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;div&gt;
      &lt;form&gt;
          &lt;p&gt;&lt;a href="http://localhost/testwork/"&gt;Refresh&lt;/a&gt;&lt;/p&gt;
          &lt;div&gt;&lt;label for="applicant-name"&gt;First Name&lt;/label&gt;&lt;br /&gt;&lt;input type="text" name="name" id="applicant-name"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;label for="applicant-surname"&gt;Surname&lt;/label&gt;&lt;br /&gt;&lt;input type="text" name="surname" id="applicant-surname"&gt;&lt;/div&gt;
          &lt;div&gt;&lt;label for="applicant-identity"&gt;Smart ID Number&lt;/label&gt;&lt;br /&gt;&lt;input type="text" name="surname" id="applicant-identity"&gt;&lt;/div&gt;
          &lt;div id="town"&gt;
              &lt;label for="applicant-town"&gt;Town&lt;/label&gt;&lt;br /&gt;
              &lt;select name="town" id="applicant-town"&gt;&lt;option value="0"&gt;-- Select Town --&lt;/option&gt;
              &lt;?php
              $towns = mysqli_query($dbcon, "SELECT town_id, town_name FROM towns");
              while($town = mysqli_fetch_array($towns)){
                  $town_id = $town['town_id'];
                  $town_name = $town['town_name'];
                  echo("&lt;option value=\"$town_id\"&gt;$town_name&lt;/option&gt;");
              }?&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;div id="suburb"&gt;
              &lt;label for="applicant-suburb"&gt;Suburb&lt;/label&gt;&lt;br /&gt;
              &lt;select name="suburb" id="applicant-suburb"&gt;
                  &lt;option value="0"&gt;-- Select Suburb --&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $('#applicant-town').change(function(){
          var suburb_town = $(this).val();
          $.ajax({
              type: "GET",
              url: "suburbs.php",
              data: {town: suburb_town}
          })
          .done(function(data){
              alert(data);
              var burbs = JSON.parse(data);
              alert(burbs); // e.g. [{"1":"Halfway House"},{"2":"Noordwyk"},{"3":"Vorna Valley"}]
              $(burbs).each(burbs, function(key, value){
                  $('#applicant-suburb').append('&lt;option value="'+key+'"&gt;'+value+'&lt;/option&gt;');
              });
          })
          .fail(function(){
              alert('There is an error somewhere.');
          });
      });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>suburbs.php</p>
  
  <pre><code>&lt;?php
  $dbcon = new mysqli (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
  if(isset($_GET['town'])){
      $town_suburbs = array();
      $town_id = htmlspecialchars($_GET['town']);
      $suburbs = mysqli_query($dbcon, "SELECT suburb_id, suburb_name FROM suburbs WHERE suburb_town = $town_id");
      while($suburb = mysqli_fetch_array($suburbs)){
          $suburb_id = $suburb['suburb_id'];
          $suburb_name = $suburb['suburb_name'];
          $town_suburbs[] = array($suburb_id =&gt; $suburb_name);
      }
      echo json_encode($town_suburbs);
  }
  ?&gt;
  </code></pre>