Simple JSON viewer

index.html

      <h1>Loading latest data from Raisely</h1>
		
      <table class="ladder">
          <thead><tr><td> </td><td>Name: </td><td>Total</td></tr></thead>
          <tbody id = "stage">
              <!-- The Raisely JSON data gets injected in here --> 
          </tbody>
      </table>
		

script.js

var url = 'https://api.raisely.com/v3/profiles?campaign=447025f0-0e01-11ed-8e4d-c90543f52ff7&limit=6&offset=0&order=desc&q=&sort=total&type=';

$(document).ready(function () {
        $.getJSON(url, function (ladder) {
            $.each(ladder.data, function(index, element) {
                //alert(element.name); 
                $("#stage").append("<tr>"); // open new row 
                $("#stage").append("<td class='photoUrl'> <img src='" + element.photoUrl + "' /></td>");
                $("#stage").append("<td> " + element.name + "</td>");
                $("#stage").append("<td> $" + element.total + "</td>");
                $("#stage").append("</tr>"); // close new row
                });
        });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.min.js"></script>

simple-json-viewer.markdown

A Simple JSON renderer

A simple JSON renderer designed to parse JSON from an external URL and display selected elements in a basic HTML table. I don't use jQuery often, but this made it simple, fast, and easy for others to work with.

License.

style.scss

body {
  margin: 2rem;
}
table {
  background-color: #eee;
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}
table thead td {
  background: #444;
  color: #8;
}
table td {
  outline: 1px #ddd solid;
  padding: 5px;
}

.photoUrl {
  width: 40px;
}
.photoUrl img {
  width: 100%;
}