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 AJAX Basics (retiring) Programming AJAX Processing JSON Data

Christiaan Quyn
Christiaan Quyn
14,706 Points
Posted by Christiaan Quyn
Christiaan Quyn
14,706 Points

'Unresolved variable inoffice' when running on localhost

Hey guys , so my code works fine on workspace , it's exactly the same as the video but the moment I load it up on my IDE -JetBrains Webstorm running locally, it just loads the h2 headings and nothing underneath. It seems like my widget.js file isn't recognizing the variables defined in the arrays of the .json files. Does anyone know what I have to do ? How do I make my conditional 'if' statement compare against the value defined in the objects of the .json file ?

3 Answers

Seth Kroger
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

Are you previewing the page through WebStorm's built-in web server or as a file: (as opposed to http:) in your browser. If it's the latter you can't make an XHR on a file, and the JSON won't load.

Christiaan Quyn
Christiaan Quyn
14,706 Points
Christiaan Quyn
Christiaan Quyn
14,706 Points

Oh.. I'm not entirely I understand.. I'm running MAMP, it's configured to WebStorm and didn't pose any problem when running javascript from the previous videos like eg. updating the HTML on the page via AJAX using plain javascript

Seth Kroger
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

That should be fine then. If you check the Network tab in DevTools, are you getting anything other than status 200 on your requests? Also double check the response bodies too.

Christiaan Quyn
Christiaan Quyn
14,706 Points
Christiaan Quyn
Christiaan Quyn
14,706 Points

This is what is says on my chrome developer tools window - Failed to load resource: the server responded with a status of 404 (Not Found)

Seth Kroger
Seth Kroger
56,414 Points
Seth Kroger
Seth Kroger
56,414 Points

OK then. If it's a 404 you probably have the files in a different path locally than workspaces. If you either fix the paths in the XHR or move the .json files to the current path it should work fine.

Christiaan Quyn
Christiaan Quyn
14,706 Points
Christiaan Quyn
Christiaan Quyn
14,706 Points

You were right ! It was a directory paths conflict , thank you Seth :)

Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi Christian,

Without looking at your code it would be hard to pinpoint where the issue is. If you open the developer console on chrome or firefox do you get any status code errors?

Christiaan Quyn
Christiaan Quyn
14,706 Points
Christiaan Quyn
Christiaan Quyn
14,706 Points

Sorry , here's the code -

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX Office Status Widget</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
  <script src="js/widget.js"></script>
</head>
<body>
<div class="grid-container centered">
  <div class="grid-100">
    <div class="contained">
      <div class="grid-100">
        <div class="heading">
          <h1>Corporate Intranet</h1>
        </div>
      </div>
      <section class="grid-70 main">
        <h2>Lorem Ipsum Headline</h2>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      </section>
      <aside class="grid-30 list">
        <h2>Meeting Rooms</h2>
        <div id="roomList">


        </div>
        <h2>Employee Office Status</h2>
        <div id="employeeList">

        </div>
      </aside>
      <footer class="grid-100">
        <p>Copyright, The Intranet Corporation</p>
      </footer>
    </div>
  </div>
</div>
</body>
</html>

widget.js

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {

        //below logs out to the console the type of data in xhr
        //console.log(typeof xhr.responseText);

        var employees = JSON.parse(xhr.responseText);
        var statusHTML = '<ul class="bulleted">';

        for (var i=0; i < employees.length; i += 1) {
            if (employees[i].inoffice === true) {
                statusHTML += '<li class="in">';
            } else {
                statusHTML += '<li class="out">';
            }
            statusHTML += employees[i].name;
            statusHTML += '</li>';
        }
        statusHTML += '</ul>';
        document.getElementById('employeeList').innerHTML = statusHTML;
    }
};


xhr.open('GET', '../data/employees.json');
xhr.send();

var roomXHR = new XMLHttpRequest();
roomXHR.onreadystatechange = function () {
    if (roomXHR.readyState === 4) {

        //below logs out to the console the type of data in xhr
        //console.log(typeof roomXHR.responseText);

        var rooms = JSON.parse(roomXHR.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;
    }
};

roomXHR.open('GET', '../data/rooms.json');
roomXHR.send();

*employees.json *

[
  {
   "name": "Aimee",
   "inoffice": false
  },
  {
   "name": "Amit",
   "inoffice": false
  },
  {
   "name": "Andrew",
   "inoffice": true
  },
  {
   "name": "Ben",
   "inoffice": true
  },
  {
   "name": "Elizabeth",
   "inoffice": true
  },
  {
   "name": "Guil",
   "inoffice": false
  },
  {
   "name": "Hampton",
   "inoffice": true
  },
  {
   "name": "Jason",
   "inoffice": true
  },
  {
   "name": "Lainie",
   "inoffice": true
  },
  {
   "name": "Kenneth",
   "inoffice": false
  }, 
  {
   "name": "Pasan",
   "inoffice": true
  },
  {
   "name": "Shawna",
   "inoffice": true
  },
  {
   "name": "Zac",
   "inoffice": false
  }
]

rooms.json

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

main.css

@charset "UTF-8";

.grid-container:before,
.grid-container:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.grid-container:after {
  clear: both;
}

.grid-container {
  max-width: 1080px;
  position: relative;
}

.grid-30,
.grid-70,
.grid-100 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

body {
  min-width: 320px;
}

@media screen {
  .grid-container:before,
  .grid-container:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }

  body {
    min-width: 320px;
  }
}

@media screen and (min-width: 1080px) {
  .grid-container:before,
  .grid-100:before,
  .grid-container:after,
  .grid-100:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after,
  .grid-100:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }

  .grid-30 {
    float: left;
    width: 30%;
  }

  .grid-70 {
    float: left;
    width: 70%;
  }

  .grid-100 {
    clear: both;
    width: 100%;
  }
}

@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}

@media screen and (max-width: 680px) {
  .grid-container:before,
  .grid-container:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media screen and (min-width: 680px) and (max-width: 1080px) {
  .grid-container:before,
  .grid-container:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after {
    clear: both;
  }

  .grid-container {
    max-width: 1080px;
    position: relative;
  }

  .grid-30,
  .grid-70,
  .grid-100 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
  }
}

.grid-container:before,
.grid-container:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.grid-container:after {
  clear: both;
}

.grid-container {
  max-width: 1080px;
  position: relative;
}

.grid-30,
.grid-70,
.grid-100 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

html,
body,
div,
h1,
h2,
p,
ul,
li,
aside,
footer,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ul {
  list-style: none;
}

aside,
footer,
section {
  display: block;
}

body {
  background: #edeff0;
  padding: 50px 0 0;
  font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 62.5%;
}

.centered {
  margin: 0 auto;
}

.contained {
  background: white;
  padding: 30px 15px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

.heading {
  margin-bottom: 20px;
}

h1,
h2 {
  font-size: 2.4em;
  font-weight: 500;
  margin-bottom: 8px;
  color: #384047;
  line-height: 1.2;
}

h2 {
  font-size: 1.8em;
}

aside h2 {
  margin-bottom: 15px;
}

p {
  color: #8d9aa5;
  font-size: 1.4em;
  margin-bottom: 15px;
  line-height: 1.4;
}

ul li {
  margin: 15px 0 0;
  font-size: 1.6em;
  color: #8d9aa5;
  position: relative;
}

ul.rooms {
  margin-bottom: 30px;
}

ul.rooms li {
  font-size: 1em;
  display: inline-block;
  width: 10%;
  padding: 3px 2px 2px;
  border-radius: 2px;
  margin: 0 3px 3px 3px;
  color: white;
  text-align: center;
}

ul.rooms li.empty {
  background-color: #5fcf80;
}
ul.rooms li.full {
  background-color: #ed5a5a;
}

ul.bulleted {
  margin-bottom: 20px;
}

ul.bulleted li {
  padding-left: 40px;
}
ul.bulleted li:before {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: .5em;
  padding: 3px 2px 2px;
  border-radius: 2px;
  text-align:center;
  width: 25px;
}

ul.bulleted .in {
  color: #5A6772;
}
ul.bulleted .in:before {
  content: "IN";
  background-color: #5fcf80;
}
ul.bulleted .out {
  color: #A7B4BF;
}
ul.bulleted .out:before {
  content: "OUT";
  background-color: #ed5a5a;
}

footer p {
  color: #b2bac2;
  font-size: 1.15em;
  margin: 0;
}
Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

I do not see errors in your ajax request. Do you have both JSON files stored inside a data folder?

Christiaan Quyn
Christiaan Quyn
14,706 Points
Christiaan Quyn
Christiaan Quyn
14,706 Points

Yep I do , exactly - the code ran perfectly well on workspaces .. this is a problem with the IDE Webstorm, it isnt recognizing my variables stored in the .json files , any idea how to include them into this .js file ?