Parse json to HTML - how does this code works

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

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {

        var html = "";
        // Only change code below this line.
         /*json.forEach(function (itm ) {  html = '<code>'+JSON.stringify(json)+'</code>';  });*/
        json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "" + key + ": " + val[key] + "<br>";
  });
  html += "</div><br>";
});
      
        
        // Only change code above this line.

        $(".message").html(html);

      });
    });
  });
</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>

var html = "";
       // Only change code below this line.
        /*json.forEach(function (itm ) {  html = '<code>'+JSON.stringify(json)+'</code>';  });*/
       json.forEach(function(val) {
 var keys = Object.keys(val);
 html += "<div class = 'cat'>";
 keys.forEach(function(key) {
   html += "" + key + ": " + val[key] + "<br>";
 });
 html += "</div><br>";