How To Query VersionOne REST API and Render HTML with jQuery

HTML

<div id="error">
  <h1>Error During AJAX Call:</h1>
  <br />
  <hr />
  <br />
  <p id="errorMessage">
  </p>
</div>

<div id="success">
  <h1>Now, that's <b>beautiful JSON</b>:</h1>
  <br />
  <pre id="output"></pre>
  <br />
  <a id="link"></a>
  <br/>
  <br/>
  Right click and select <code>Open link in new tab</code> to play with this request some more.
  </p>
</div>

CSS

body {
  margin: 10px
}

#error {
  background: lightyellow;
  border: 2px solid firebrick;
  padding: 10px;
  visibility: hidden;
}

#success {
  background: whitesmoke;
  border: 2px solid firebrick;
  padding: 10px;
  visibility: hidden;
}

#output, #errorMessage {
  font-size: 80%;
  border: 1px solid darkgray;
  background: linen;
  padding: 6px;
}

JavaScript

var url = "https://www52.v1host.com/teste/rest-1.v1/Data/Story/";
var headers = { Authorization: "Basic " + btoa("sandrosilva:abc123"), Accept: "haljson" };
var settings = { url: url, headers: headers, dataType: "json" };
$.ajax(settings).done(function(data) {
    beautifulJson = JSON.stringify(data, null, 4);
    link = settings.url + "&acceptFormat=haljson";
    $("#link").attr("href", link).text(link);
    $("#error").hide();
    $("#output").text(beautifulJson);
    $("#success").css("visibility", "visible").fadeIn();
}).fail(function(jqXHR) {
    $("#success").hide();
    $("#errorMessage").html(jqXHR.responseText);
    $("#error").css("visibility", "visible").fadeIn();
});