title: Using AJAX in Node.js with ejs
body: <p>I am tring to figure out how to use ajax in node.js
  I have this for now.
  How do i display for example order[0].name and order[1].name inside my 
  div id="champ"  when I press the button named Press.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var express = require("express");
  var app = express();
  app.use(express.static("public"));
  app.set("view engine", "ejs");
  
  var order = [
      {
          id: 1,
          name: "James",
          drink: "Coffee"
      },
      {
          id: 2,
          name: "John",
          drink: "Latte"
      }
  ];
  
  app.get("/", function (req, res) {
      res.render("home", {order: order});
  });
  </code></pre>
  
  <p><strong>home.ejs</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              AJAX calls
          &lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Ajax&lt;/h1&gt;
  
          &lt;% for (var i = 0; i&lt; order.length; i++) { %&gt;
              &lt;div id="champ"&gt;
  
              &lt;/div&gt;
          &lt;% } %&gt;
  
          &lt;button&gt;Press&lt;/button&gt;
  
          &lt;script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="javascripts/script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>$(function() {
  
      $("button").on("click", function () {
          $.ajax({
          type: 'GET',
          url: '/',
          success: function(result) {
               $('#champ').html(result);
          }
        });
  
      })
  
  });
  </code></pre>