Convert JSON Data to HTML code breakdown request

Convert JSON Data to HTML code breakdown request
0

#1

Tell us what’s happening:

I am asked to copy paste this code and see what happens. I don’t want to go the next challenge unless i haven’t understood this script line by line. Can anyone please break this down and explain it to me? In function(val) , is val an inbuilt keyword and in function(json) what does json in it do? why are the loopings done?

Your code so far

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
   /*from here ---> */  $.getJSON("/json/cats.json", function(json) {
 <script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {
      
        var html = "";
      json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});

        $(".message").html(html); /*<--- To here*/
      });
    });
  });
</script>
<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
   </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36.

Link to the challenge:


#2

I suggest first reading through the documentation for the functions $.getJSON, forEach, Object.keys and then come back to this code and ask specific questions about what parts of those functions you do not understand.

Many of the challenges and projects you will soon encounter are going to research on your part to attempt to understand what you don’t understand. It is just part of the learning process.