Problems in "JSON APIs and Ajax: Convert JSON Data to HTML" task

Hey!

I have the following problemin this challenge

My code is returning Your code should store the data in the html variable message but the code is doing that! Or there’s some mistake?

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      req=new XMLHttpRequest();
      req.open("GET",'/json/cats.json',true);
      req.send();
      req.onload=function(){
        json=JSON.parse(req.responseText);
        let html = "<div class='val'>";
        // Add your code below this line
        json.forEach(function(val){                    
          var kk = Object.keys(val);          
          kk.forEach(function(k){                        
            html=html+"<strong>"+k+"</strong>: "+val[k]+"<br>";
          });
          html=html+"<br/>";
        });        
        html=html+"</div>";
        
        // Add your code above this line
        document.getElementsByClassName('message')[0].innerHTML=html;
      };
    };
  });
</script>

Look carefully at the example code. You have not created a div with class=“cat” which holds all of the other html.

@RandellDawson even with the <div class='cat'> the message appears

<script>
  document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('getMessage').onclick=function(){
      req=new XMLHttpRequest();
      req.open("GET",'/json/cats.json',true);
      req.send();
      req.onload=function(){
        json=JSON.parse(req.responseText);
        let html = "<div class='val'>";
        // Add your code below this line
        json.forEach(function(val){                    
          var kk = Object.keys(val);          
          html+="<div class='cat'>";
          kk.forEach(function(k){                        
            html=html+"<strong>"+k+"</strong>: "+val[k]+"<br>";
          });
          html=html+"</div><br>";
        });        
        html=html+"</div>";
        
        // Add your code above this line
        document.getElementsByClassName('message')[0].innerHTML=html;
      };
    };
  });
</script>

Why did you change the line above the comment? Change it back to what it was when the challenge first loaded for you. You can click Reset All Code to do this automatically, but make sure to copy your code or you will lose it?

@RandellDawson do not remember why I’ve changed var to let :man_facepalming:

But well, I’ve reset the code and the error remains but

json.forEach(function(val){                    
          var kk = Object.keys(val);          
          html+="<div class='cat'>";
          kk.forEach(function(key){                        
            html+= "<strong>"+key+"</strong>: "+val[key]+"<br>";
          });
          html+="</div><br>";
        });   

I changed html+="</div><br>"; to html += "</div><br>"; and it validated the code!

Some ‘good practice’ mistake issue :laughing:

Thanks, @RandellDawson for the support!