Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Nicolas Queen
Nicolas Queen
7,331 Points

Trying a Personal API Project, But Can't get HTML to Display

Here is my html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hottest Games on Board Game Geek Right Now</title>
  <link rel="stylesheet" href="css/main.css">
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
    <div id="games">

    </div>
</body>
</html>

and the javascript file:

$(document).ready(function(){
    var bggAPI = "https://bgg-json.azurewebsites.net/hot?callback=getHotness";
    function getGames(data) {
      var htmlBGG = "<ul>";
      $.each(data, function(i, game){
        htmlBGG += "<li><a href='https://www.boardgamegeek.com/boardgame/'" + data.gameId + "/";
        htmlBGG += data.name + ">";
        htmlBGG += "<img src='http://" + data.thumbnail + "'></a></li>";
      });
      htmlBGG += "</ul>";
      $('#games').html(htmlBGG);
   }
    $.getJSON(bggAPI, getGames);
});

In console, I see that the XHR request is being sent and GET is happening. The HTML is not sending into the div ID. I am losing my hair on this! Anyone able to help?

1 Answer

J.T. Gralka
J.T. Gralka
20,126 Points
J.T. Gralka
J.T. Gralka
20,126 Points

Nicolas Queen,

There are a few things I've noticed about your app. First, I checked the response of your API call at https://bgg-json.azurewebsites.net/hot?callback=getHotness, and it appears that it does not return a valid array of objects. It looks like it returns the array of objects wrapped in something called getHotness(...);. For this reason, $.getJSON(bggAPI, getGames) is not supplying the callback with an iterable array.

Once you get your backend script to produce a proper array of JSON objects, you might also consider indexing the gameId and name properties using the game argument and not data.

Hope this helps! Good luck!

J.T. Gralka