Convert JSON Data to HTML help?

JavaScript
1

Tell us what’s happening:
Hi. So, I pasted the code as instructed. But then thought I’d play with it a little bit. So what I did was change the “val” argument of the function to val1. The code stopped working after doing this.So I reset the code and the next time I changed the “key” argument to val2 but the code worked perfectly. I don’t understand why the code works for one and doesn’t for the other. Thanks.

Your code so far

<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(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + 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>

Your browser information:

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

Link to the challenge:
https://www.freecodecamp.org/challenges/convert-json-data-to-html

3

Sure. Thanks.

<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(val1) {
  var keys = Object.keys(val1);
  html += "<div class = 'cat'>";
  keys.forEach(function(key1) {
    html += "<strong>" + key1 + "</strong>: " + val[key1] + "<br>";
  });
  html += "</div><br>";
});
        
        
        // Only change code above this line.

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

      });
    });
  });
</script>