Messing around with JSON Parsing

JSON Musings

by beebul

HTML

<body>
  <button id="go">Go &#8680;</button>
  <button id="clear">Clear &#9760;</button>
  <br>
  <div id="results"></div>
</body>

CSS

* {
  font-family: "Consolas";
  background: #fff;
}

#go,
#clear {
  cursor: pointer;
  background-color: #859DA0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
}

#clear {
  float: right;
}

#go:hover,
#clear:hover {
  background-color: #fff;
  color: #859DA0;
}

h3 {
  color: #1C90F3;
}

JavaScript

//Check out the JSON schema
//http://www.jsoneditoronline.org/?id=0eccc69f5457b995cca08ac0e72be41b

$("#go").click(function() {
  $("#results").empty(); //in case the function was run previously
  //Get the JSON data which is hosted in this bin : http://myjson.com/qcrer
  $.getJSON('https://api.myjson.com/bins/qcrer', function(data) {

    var jsonStr = JSON.stringify(data); //test it's returning data
    console.log(jsonStr); //check the console, we got the JSON!

    // Some Basic Examples - how to traverse and access properties

    //-- Get all the Admin Roles in "Nuke":
    $("#results").append("<h3>Admin Roles in Nuclear:</h3>")
    var nuclearAdmin = data.disciplines.field.Nuclear.area.Administration.roles;
    $("#results").append("<b>Admin Roles : </b>" + nuclearAdmin.toString() + "<br><hr>").hide().slideDown(100);

    //-- Get all the roles under "Oil" field and "Design" area
    $("#results").append("<h3>Design Roles under Oil:</h3>")
    $("#results").append("<b>Design Roles : </b>" + data.disciplines.field.Oil.area.Design.roles + "<hr>").slideDown(100);

    //-- Get all the Areas under "Oil" and their respective Roles
    $("#results").append("<h3>Areas AND Roles under Oil: </h3>");
    for (var i in data.disciplines.field.Oil.area) {
      var obj = data.disciplines.field.Oil.area[i];
      for (var item in obj) {
        var oilAreas = "<b>" + i + " Area</b> : " + obj[item];
        $("#results").append(oilAreas.toString() + "<br><hr>").slideDown(100);
      }
    }
  });
});

$("#clear").click(function() {
  $("#results").empty();
});