1

I am trying to implement mustache js to display employee names on a webpage but I am kind of confused on doing this. When I load the webpage, nothing appears. How do I make the information appear? Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
 <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

<script type="text/javascript">
 var data = { depts: [
   { name:"Accounting",
  employees: [
    {firstName: "Angela", lastName: "Martin", title: "Senior Accountant"},
    {firstName: "Kevin", lastName: "Malone", title: "Accountant"},
    {firstName: "Oscar", lastName: "Martinez", title: "Accountant"}]
   },
   { name: "Customer Service",
  employees: [
    {firstName: "Kelly", lastName: "Kapoor", title: "Customer Service Rep."}]
   },
   { name: "Human Resources",
  employees: [
    {firstName: "Toby", lastName: "Flenderson", title: "Human Resources Manager"}]
  },
   { name: "Management",
  employees: [
    {firstName: "Ryan", lastName: "Howard", title: "Vice President, North East"},
    {firstName: "Michael", lastName: "Scott", title: "Regional Manager"},
    {firstName: "Dwight", lastName: "Schrute", title: "Assistant Regional Manager"},
    {firstName: "Jim", lastName: "Halpert", title: "Assistant Regional Manager"}]
   },
   { name: "Sales",
  employees: [
    {firstName: "Andy", lastName: "Bernard", title: "Sales Director"},
    {firstName: "Phyllis", lastName: "Lapin", title: "Sales Representative"},
    {firstName: "Stanley", lastName: "Hudson", title: "Sales Representative"}]
   },
   { name: "Support",
  employees: [
    {firstName: "Pamela", lastName: "Beesly", title: "Receptionist"},
    {firstName: "Creed", lastName: "Bratton", title: "Quality Assurance"},
    {firstName: "Meredith", lastName: "Palmer", title: "Supplier Relations"}] 
   }]
 };

 var employeeTmp = "{{#depts}}<h1>{{name}}</h1>" + "<ul>{{#employees}}{{>employee}}{{/employees}}</ul>{{/depts}}";
 var names = {employee: "<li>{{firstName}} {{lastName}}</li>"};
 var html = Mustache.to_html(employeeTmp, data, names);
 $('#display').html(html);
</script>

<div id="display"></div>
</body>
</html>

3 Answers3

1

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
 <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>


<div id="display"></div>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

<script type="text/javascript">
 var data = { depts: [
   { name:"Accounting",
  employees: [
    {firstName: "Angela", lastName: "Martin", title: "Senior Accountant"},
    {firstName: "Kevin", lastName: "Malone", title: "Accountant"},
    {firstName: "Oscar", lastName: "Martinez", title: "Accountant"}]
   },
   { name: "Customer Service",
  employees: [
    {firstName: "Kelly", lastName: "Kapoor", title: "Customer Service Rep."}]
   },
   { name: "Human Resources",
  employees: [
    {firstName: "Toby", lastName: "Flenderson", title: "Human Resources Manager"}]
  },
   { name: "Management",
  employees: [
    {firstName: "Ryan", lastName: "Howard", title: "Vice President, North East"},
    {firstName: "Michael", lastName: "Scott", title: "Regional Manager"},
    {firstName: "Dwight", lastName: "Schrute", title: "Assistant Regional Manager"},
    {firstName: "Jim", lastName: "Halpert", title: "Assistant Regional Manager"}]
   },
   { name: "Sales",
  employees: [
    {firstName: "Andy", lastName: "Bernard", title: "Sales Director"},
    {firstName: "Phyllis", lastName: "Lapin", title: "Sales Representative"},
    {firstName: "Stanley", lastName: "Hudson", title: "Sales Representative"}]
   },
   { name: "Support",
  employees: [
    {firstName: "Pamela", lastName: "Beesly", title: "Receptionist"},
    {firstName: "Creed", lastName: "Bratton", title: "Quality Assurance"},
    {firstName: "Meredith", lastName: "Palmer", title: "Supplier Relations"}] 
   }]
 };

 var employeeTmp = "{{#depts}}<h1>{{name}}</h1>" + "<ul>{{#employees}}{{>employee}}{{/employees}}</ul>{{/depts}}";
 var names = {employee: "<li>{{firstName}} {{lastName}}</li>"};
 var html = Mustache.to_html(employeeTmp, data, names);
 $('#display').html(html);
</script>
</body>
</html>

just put script tag below div tag and everything will be displayed

Oleg Markoff
  • 306
  • 2
  • 7
1

Put your javascript code inside $(document).ready().

Your script is being executed before the #display element exists, that's why your code doesn't work.

Check this answers:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>title</title>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      
      var data = {
        depts: [{
            name: "Accounting",
            employees: [{
                firstName: "Angela",
                lastName: "Martin",
                title: "Senior Accountant"
              },
              {
                firstName: "Kevin",
                lastName: "Malone",
                title: "Accountant"
              },
              {
                firstName: "Oscar",
                lastName: "Martinez",
                title: "Accountant"
              }
            ]
          },
          {
            name: "Customer Service",
            employees: [{
              firstName: "Kelly",
              lastName: "Kapoor",
              title: "Customer Service Rep."
            }]
          },
          {
            name: "Human Resources",
            employees: [{
              firstName: "Toby",
              lastName: "Flenderson",
              title: "Human Resources Manager"
            }]
          },
          {
            name: "Management",
            employees: [{
                firstName: "Ryan",
                lastName: "Howard",
                title: "Vice President, North East"
              },
              {
                firstName: "Michael",
                lastName: "Scott",
                title: "Regional Manager"
              },
              {
                firstName: "Dwight",
                lastName: "Schrute",
                title: "Assistant Regional Manager"
              },
              {
                firstName: "Jim",
                lastName: "Halpert",
                title: "Assistant Regional Manager"
              }
            ]
          },
          {
            name: "Sales",
            employees: [{
                firstName: "Andy",
                lastName: "Bernard",
                title: "Sales Director"
              },
              {
                firstName: "Phyllis",
                lastName: "Lapin",
                title: "Sales Representative"
              },
              {
                firstName: "Stanley",
                lastName: "Hudson",
                title: "Sales Representative"
              }
            ]
          },
          {
            name: "Support",
            employees: [{
                firstName: "Pamela",
                lastName: "Beesly",
                title: "Receptionist"
              },
              {
                firstName: "Creed",
                lastName: "Bratton",
                title: "Quality Assurance"
              },
              {
                firstName: "Meredith",
                lastName: "Palmer",
                title: "Supplier Relations"
              }
            ]
          }
        ]
      };

      var employeeTmp = "{{#depts}}<h1>{{name}}</h1>" + "<ul>{{#employees}}{{>employee}}{{/employees}}</ul>{{/depts}}";
      var names = {
        employee: "<li>{{firstName}} {{lastName}}</li>"
      };
      var html = Mustache.to_html(employeeTmp, data, names);
      $('#display').html(html);
    });
  </script>

  <div id="display"></div>
</body>

</html>
Community
  • 1
  • 1
Marcos Casagrande
  • 29,440
  • 5
  • 62
  • 77
0

You mixed up a few things. In order to reach your DIV "display", your body has to be fully loaded. Your script will be call first and then your body. I suggest your invert them as follow : 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js">
  </script>
</head>
<body>
  <div id="display"></div>
</body>

<script type="text/javascript">
  // your script here
  $('#display').html(html);
</script>
</html>
Vini
  • 96
  • 7