This is how I solved it

// Grab Divs and create <ul class="rooms"></ul>
const roomListDiv = document.getElementById('roomList');
const roomStatus = document.createElement('ul');
roomStatus.className = 'rooms';
let roomStatusItem;

// Create XMLHttpRequest Object
const roomsAv = new XMLHttpRequest();

// A create element function, so I don't repeat myself
let createElement = (el, cssClass) => {
    roomStatusItem = document.createElement(el);
    roomStatusItem.className = cssClass;
    roomStatus.appendChild(roomStatusItem);
};

// And this is pretty much what Dave did:
roomsAv.onreadystatechange = () => {
  if(roomsAv.readyState === 4 && roomsAv.status === 200) {
    let rooms = JSON.parse(roomsAv.responseText);
    for (let i = 0; i < rooms.length; i+= 1) {
// check if rooms are available
      if(rooms[i].available === true) {
// if so create a li with the class of empty
        createElement('li', 'empty');
      } else {
// if not create a li with the class of full
        createElement('li', 'full');
      }
// append room numbers to tags
      roomStatusItem.textContent = rooms[i].room;
    }
/* now because I created the element using js instead of just putting the html tag, instead of adding innerHTML, I appended the room status */
      roomListDiv.appendChild(roomStatus);
// check if there are no errors
  } else if (roomsAv.status === 404) {
    roomListDiv.textContent = 'Could not find rooms avaibility list. Check with your provider if the database is down';
  } else if (roomsAv.status === 401) {
      roomListDiv.textContent = 'Unothorized access. Contact if your provider to check your credentials';
  }
};

// done :D
roomsAv.open('GET', 'data/rooms.json');
roomsAv.send();