title: Ajax call to API to retrieve JSON data. How do you use the response back
body: <p>I am making a simple chrome application that calls my REST API to retrieve some basic user information in the JSON format. I have the below which in chrome developer tab preview shows to be working, connecting and retrieving what ever I put in my request.</p>
  
  <p>My question is how do I go about dynamically showing on my html page what ever is retrieved?</p>
  
  <p>Ideally I what to just show certain fields only from my response. I.e. just the Name, Location, Contact number as variables I can use throughout my page. </p>
  
  <p>Any pointers would be great. Thanks</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Connect to API&lt;/title&gt;
    &lt;style&gt;
    img {
      height: 100px;
      float: left;
    }
    &lt;/style&gt;
    &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  
  var authorizationToken = "xxxxxxxxxxxxxx";
  function myapiRequest(endpoint, method, options) {
    $.ajax($.extend({}, {
      type: method,
      dataType: "json",
       success: function(json) {
                items = json;
              },
      url: "https://api.myapi.com/" + endpoint,
      headers: {
        "Authorization": "Token token=" + authorizationToken,
        "Accept": "application/vnd.myapi+json;version=2"
      }
    },
    options));
  }
  myapiRequest('/users/0H5G?include%5B%5D=contact_methods&amp;include%5B%5D=teams'); // this will be a variable soon
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Response 200 OK</p>
  
  <pre><code>{"user":{"name":"john smith Jsmith","email":"john smith @xxxxxxx.com","time_zone":"Asia/Hong Kong","phone":"0123456",}}
  </code></pre>