Menu
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);
}
});
})
});
769
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>
<% } %>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
