Convert JSON Data to HTML code breakdown request

JavaScript
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: