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

jason limmm
jason limmm
8,009 Points
Posted by jason limmm
jason limmm
8,009 Points

any problems with my ajax?

var rooms = new XMLHttpRequest();
rooms.onreadystatechange = function () {
  if(rooms.readyState === 4 && rooms.status === 200) {
    var rooms = JSON.parse(rooms.responseText);
    var statusHTML = '<ul class="rooms">';
    for (var i=0; i<rooms.length; i += 1) {
      if (rooms[i].available === true) {
        statusHTML += '<li class="empty">';
      } else {
        statusHTML += '<li class="full">';
      }
      statusHTML += rooms[i].room;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('roomList').innerHTML = statusHTML;
  }
  rooms.open('GET', '../data/rooms.json');
  rooms.send();

here is the .json file

[
  {
   "room": 101,
   "available": false
  },
  {
   "room": 102,
   "available": true
  },
  {
   "room": 103,
   "available": false
  },
  {
   "room": 104,
   "available": false
  },
  {
   "room": 105,
   "available": true
  },
  {
   "room": 106,
   "available": true
  }
]

i cant seem to find anything wrong with this code but the things won't appear in my html website

here is the link to the image of my desired result https://imgur.com/a/xra4e2j

1 Answer

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

If you're using a workspace, you can make it much easier for someone to help by creating a snapshot of your workspace and posting a link to it. Here's a video showing how to do this.

But before doing anything else, I suggest checking to see if your browser is blocking mixed security content in case the AJAX is being delivered differently from the page itself. If your browser allows setting this on a per-site basis, you can safely enable mixed content for just the treehouse servers. (My Chrome setting is to allow insecure content from [*.]ecs-production.treehouse-app.net).

jason limmm
jason limmm
8,009 Points
jason limmm
jason limmm
8,009 Points

https://w.trhou.se/pv6bkwqulw ok here i made a snapshot, i don't think it's the mixed security content thingy

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

Since my browser is already set to allow insecure content, I can't see any issue there from treehouse, BUT I do see one with Google fonts. You might want to use https for that instead of http.

There's a syntax issue with the JavaScript code, the final brace to end the function definition is missing. Compare the code for rooms with the similar code for xhr above it and it should be obvious.

Also, rooms gets redefined inside the function, which invalidates references to things like rooms.readyState, but you can fix it by using a different variable (as was done above with xhr and employess), or by using "this" for the XHR object references (like this.readyState).

jason limmm
jason limmm
8,009 Points
jason limmm
jason limmm
8,009 Points 
var roomreq = new XMLHttpRequest();
roomreq.onreadystatechange = function () {
  if(roomreq.readyState === 4 && roomreq.status === 200) {
    var rooms = JSON.parse(rooms.responseText);
    var statusHTML = '<ul class="rooms">';
    for (var i=0; i<rooms.length; i += 1) {
      if (rooms[i].available === true) {
        statusHTML += '<li class="empty">';
      } else {
        statusHTML += '<li class="full">';
      }
      statusHTML += rooms[i].room;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';
    document.getElementById('roomList').innerHTML = statusHTML;
  }
  rooms.open('GET', '../data/rooms.json');
  rooms.send();
}

ok i did as said but the meeting rooms section is still empty

here is the snapshot: https://w.trhou.se/jj4qm4iyk0

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

Those last two lines should come after the function definition, instead of being inside it, and they should also refer to "roomreq" now instead of "rooms".