title: jQuery Ajax POST to GET JSON and return value
body: <p>Ok so I have a <code>php</code> file that when a postcode has been <code>posted</code> to it it then sends a <code>get</code> request to retrieve some <code>JSON</code> data.</p>
  
  <p>The <code>JSON</code> outputs like this:</p>
  
  <pre><code>[{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"1","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"3","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":"2","HouseNumber":"48","Postcode":"G21BP"},{"AddressLine1":"West George Street","AddressLine2":null,"City":"Glasgow","County":"Lanarkshire","HouseName":null,"HouseNumber":"46","Postcode":"G21BP"}]
  </code></pre>
  
  <p>And I'm using <code>print_r($result);</code> on the <code>php</code> page to display the result</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>The HTML of my output looks like so:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;pre&gt;[{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":null,"HouseNumber":"","Postcode":"G840EG"},{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":"1","HouseNumber":"Flat 0","Postcode":"G840EG"},{"AddressLine1":"Garelochhead","AddressLine2":null,"City":"Helensburgh","County":"Argyll And Bute","HouseName":"1","HouseNumber":"Flat 1","Postcode":"G840EG"}]
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>My JS looks like bellow currently:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.btnFind').click(function() {
    var dataString;
     $.ajax({     
          url:baseUrl+'/postcode.php',
          type: 'post',
          datatype: "JSON",
          data: dataString,
          success: function() {
          //test
          }
          }).error (function() {
              alert('error with finding your address');
          }).complete (function(data) {
         console.log(data);
         //var AddressLine1 = data[0].AddressLine1,
      // AddressLine2 = data[0].AddressLine2,
      // City = data[0].City,
       //County = data[0].County,
      // HouseName = data[0].HouseName,
      // HouseNumber = data[0].HouseNumber;
               alert(data[0].AddressLine1);
      
          });     
        });</code></pre>
  </div>
  </div>
  </p>
  
  <p>but I keep getting the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'AddressLine1' of undefined
  </code></pre>
  
  <p>My guess is print_r isn't suitable but to be honest its been a while since I used JSON so I'm not up to scratch on it to be fair.</p>
  
  <p>Also its printing on a a balnk html page if that makes any difference too.</p>
  
  <hr>
  
  <p><strong>Console Log as requested</strong></p>
  
  <pre><code>Object
  abort
  :
  (a)
  always
  :
  ()
  complete
  :
  ()
  done
  :
  ()
  error
  :
  ()
  fail
  :
  ()
  getAllResponseHeaders
  :
  ()
  getResponseHeader
  :
  (a)
  overrideMimeType
  :
  (a)
  pipe
  :
  ()
  progress
  :
  ()
  promise
  :
  (a)
  readyState
  :
  4
  responseText
  :
  ""
  setRequestHeader
  :
  (a,b)
  state
  :
  ()
  status
  :
  200
  statusCode
  :
  (a)
  statusText
  :
  "OK"
  success
  :
  ()
  then
  :
  ()
  __proto__
  :
  Object
  </code></pre>