parse cf affinity insights

by brandon_rmsy

HTML

<div id="body">

  <h1>Parse CF Affinity Insights</h1>

  <hr/>
  <table border="1">
    <tr>
      <td>Url:</td>
      <td><a class="myLink">The CF Insights API</a>
      </td>
    </tr>
    <p id="result"></p>
  </table>
</div>

CSS

body {
  font-size: 75%;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

#body {
  clear: both;
  margin: 0 auto;
  max-width: 534px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 0.75em;
  border: 0 none;
  margin-top: 35px;
}

#body p {
  padding: 15px 30px 15px 10px;
}

#body tr td:nth-child(1) {
  font-weight: bold;
}

#address {
  width: 400px;
}

JavaScript

// The Google Geocoding API url used to get the JSON data
var insightsAPI = "http://classifinity.com/api/insights/df?key=*&num=10";

$.getJSON(insightsAPI, function(json) {
  var result = document.getElementById("result");

  for (var key in json.response.docs) {
    result.innerHTML += "<br/>Result Number: " + key + ": ";
    for (var value in json.response.docs[key]) {
      result.innerHTML += "<br/>" + value  + " = "+ json.response.docs[key][value];
    }
    result.innerHTML += "<br/>";
  }


});

// Caching the link jquery object
var $myLink = $('a.myLink');

// Set the links properties
$myLink.prop({
  href: insightsAPI,
  title: 'Click on this link to open in a new window.'
}).click(function(e) {
  e.preventDefault();
  window.open(this.href, '_blank');
});