Problem having displaying the converted data from json to html

HTML-CSS
#1

Tell us what’s happening:

Hello, mine code is working fine but the data after converting into html from json notation . it is not showing in the html document .

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.
        
        // Only change code above this line.

        $(".message").html(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>";
});
      });
    });
  });
</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 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0.

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

#2

This line:

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

is what outputs to the page.

This line:

       json.forEach(function(val) {

begins the loop that fills up that variable called html with the data. You are calling these out of order - you have to fill the data then send it to the page.

Just follow the directions. The starting code has:

        // Only change code below this line.
        
        
        
        // Only change code above this line.

It’s telling you exactly where to paste the code. You pasted the code in the wrong spot, too far down.

1 Like
#3