jquery and ajax office status project sidebar employeeList div is not rendered

Question

query and ajax office status project sidebar employeeList div is not rendered here is my widget.js :

$(document).ready(function() { var url = "../data/employees.json"; $.getJSON(url, function (response) { var statusHTML = '<ul class="bulleted">'; $.each(response, function (index, employee){ if (employee.inoffice === true) { statusHTML +='<li class="in">'; } else { statusHTML += '<li class="out">'; } statusHTML += employee.name + '</li>'; }); statusHTML += '</ul>'; $('#employeeList').html(statusHTML); }; // end getJSON }); // end ready

And index.html header:

<!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="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/widget.js"></script> </head>

Answer 1 · 2014-08-16T16:44:52Z

August 16, 2014 4:44pm

I resolved the issue just now, If you check my code above you will find out that I forgot to close the parentheses for the getJSON function like this: }); // end getJSON This was the only issue!

Thanks for the reply.

Answer 2 · 2014-08-16T13:48:08Z

August 16, 2014 1:48pm

You forgot to add the <li> and </li> tags between the employee names.

Should be like this:

var statusHTML = "<ul class='bulleted'>";
    $.each(response, function (index,employee) {
      if(employee.inoffice){
        statusHTML += '<li class="in">'
      }
      else{
        statusHTML += '<li class="out">'
      }

      statusHTML += employee.name + '</li>'
      });   // end each
      statusHTML += "</ul>"

Welcome to the Treehouse Community

Looking to learn something new?

Mohsen Qaddoura

Mohsen Qaddoura

jquery and ajax office status project sidebar employeeList div is not rendered

2 Answers

Mohsen Qaddoura

Mohsen Qaddoura

Misha Shaposhnikov

Misha Shaposhnikov