Question: Using AJAX in Node.js with ejs

Question

Using AJAX in Node.js with ejs

Answers 3
Added at 2016-12-28 22:12
Tags
Question

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.

app.js

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});
});

home.ejs

<!DOCTYPE html>

<html>
    <head>
        <title>
            AJAX calls
        </title>
    </head>
    <body>
        <h1>Ajax</h1>

        <% for (var i = 0; i< order.length; i++) { %>
            <div id="champ">

            </div>
        <% } %>

        <button>Press</button>

        <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="javascripts/script.js"></script>
    </body>

</html>

script.js

$(function() {

    $("button").on("click", function () {
        $.ajax({
        type: 'GET',
        url: '/',
        success: function(result) {
             $('#champ').html(result);
        }
      });

    })

});
Answers to

Using AJAX in Node.js with ejs

nr: #1 dodano: 2016-12-28 22:12

Your ajax call is going to return everything in home.ejs I think. It's been awhile since I've done express, but I think the render method will render your .ejs template. Meaning when you make the ajax call your entire template will be put into the $('#champ') selector. Also the $('#champ') selector is going to match on every div, but you're using an id on that element, and id's are reserved for individual items.

You already have the order data when you make a GET request to "/". So you could just build the div's on the server:

<% for (var i = 0; i< order.length; i++) { %>
    <div id="champ">
        <span><%= order[i].id %></span>
        <span><%= order[i].name %></span>
        <span><%= order[i].drink %></span>
    </div>
<% } %>
nr: #2 dodano: 2016-12-28 22:12
<% for (var i = 0; i < order.length; i++) { %>
  <div id="champ">
    <h2><%= order[i].name %> <%= order[i].drink %></h2>
  </div>
<% } %>
nr: #3 dodano: 2016-12-28 22:12

I'm just copying code and making it up, it should point you in the right direction:

app.js:

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");
});
app.get("/orders", function (req, res) {
    res.send(order);
});

home.ejs

<!DOCTYPE html>

<html>
  <head>
    <title>
      AJAX calls
    </title>
  </head>
  <body>
    <h1>Ajax</h1>

      <div id="target">
      </div>

    <button>Press</button>

    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="javascripts/script.js"></script>
</body>

</html>

script.js

$(function() {
  $("button").on("click", function () {
    $.ajax({
      type: 'GET',
      url: '/orders',
      success: function(result) {
        var html;
        for (var i = 0; i< result.length; i++) {
            html += '<h2>' + order[i].name + ' ' + order[i].drink + '</h2>';
        }
        $('#target').html(html);
      }
    });
  });
});
Source Show
◀ Wstecz