(ExpressJS 사용) AJAX Call 후 EJS 템플릿에서 배열을 루프하는 적절한 방법은 무엇입니까?
http call에서 얻은 객체 배열을 사용하여 내부 API로 루프를 시도하고 있습니다.request
모듈/package지금까지 API에서 데이터를 돌려받고 전체 개체를 페이지에 표시할 수 있었습니다.나는 그것을 내 페이지에 표시하고 EJS 템플릿 시스템을 사용하여 루프를 통과하고 싶습니다.Angular를 사용할 수 있다는 것을 알고 있습니다.프론트엔드는 JS인데 서버 쪽만 가지고 어디까지 갈 수 있는지 보고 싶습니다.
아래는 제 코드입니다.
server.js
// Prepend /api to my apiRoutes
app.use('/api', require('./app/api'));
api.js
var Report = require('./models/report');
var express = require('express');
var apiRoutes = express.Router();
apiRoutes.route('/reports', isLoggedIn)
.get(function (req, res,next) {
// use mongoose to get all reports in the database
Report.find(function (err, reports) {
// if there is an error retrieving, send the error.
// nothing after res.send(err) will execute
if (err)
return res.send(err);
res.json(reports);
});
});
routes.js
var User = require('./models/user');
var request = require('request');
module.exports = function (app, passport) {
app.get('/reports', isLoggedIn, function (req, res) {
res.render('pages/new-report.ejs', {
user: req.user,
title:'New Report'
});
});
request({
uri:'http://localhost:2016/api/reports',
method:'GET'
}).on('data',function(data){
console.log('decoded chunk:' + data)
}).on('response',function(resp){
resp.on('data', function(data){
console.log('received:' + data.length + ' bytes of compressed data');
app.get('/timeline', isLoggedIn, function (req, res) {
res.render('pages/timeline', {
user: req.user,
title:'Timeline',
reports: data
});
});
})
});
}
reports.ejs
그래서 그냥 전체를 출력하면reports
이런물건<p><%= reports %></p>
내 페이지에서는 모든 것이 잘 작동하고 나는 다음과 같은 것을 얻습니다.
[
{
"_id": "5775d396077082280df0fbb1",
"author": "57582911a2761f9c77f15528",
"dateTime": "30 June 2016 - 07:18 PM",
"picture": "",
"description": "",
"location": [
-122.46596999999997,
37.784495
],
"latitude": 37.784495,
"longitude": -122.46596999999997,
"address": "4529 California St, San Francisco, CA 94118, USA",
"contact": "John Doe",
"type": "Financial",
"__v": 0,
"updated_at": "2016-07-01T02:21:10.259Z",
"created_at": "2016-07-01T02:21:10.237Z",
"tags": [
"tag1,tag2"
]
}
]
그러나 아래와 같이 객체를 루프하려고 하면 보고서 객체의 반환 속성으로 UNDEFINEED가 발생하고 무한 루프가 발생합니다.
<ul class="timeline">
<% reports.forEach(function(report) { %>
<li class="timeline-yellow">
<div class="timeline-time">
<span class="date" style="text-align:left">
<%= report.type %> </span>
<span class="time" style="font-weight:700;font-size:25px;line-height:20px;text-align:left;">
<%= report.dateTime %> </span>
</div>
</li>
<% }) %>
</ul>
루프의 다른 변형을 시도해 보았지만 여전히 실패했습니다.
<ul class="timeline">
<% for (var i = 0; i < reports.length; i++) { %>
<li class="timeline-yellow">
<div class="timeline-time">
<span class="date" style="text-align:left">
<%= report[i].type %>
4/10/13 </span>
<span class="time" style="font-weight:700;font-size:25px;line-height:20px;text-align:left;">
<%= report[i].dateTime %> </span>
</div>
</li>
<% } %>
</ul>
에 대한 구문.for
빙빙 돌다ejs
완벽하지만 반복되는 배열 이름은 reports이며 report[i]을(를) 반복 내부에서 사용하는 것 같습니다. 이는 reports[i]로 변경해야 하며 이는 작동해야 합니다.
reports.ejs
<ul class="timeline">
<% for (var i = 0; i < reports.length; i++) { %>
<li class="timeline-yellow">
<div class="timeline-time">
<span class="date" style="text-align:left">
<%= reports[i].type %>
4/10/13 </span>
<span class="time" style="font-weight:700;font-size:25px;line-height:20px;text-align:left;">
<%= reports[i].dateTime %> </span>
</div>
</li>
<% } %>
</ul>
도움이 되길 바랍니다.
I guess something like this ..
<% if (reports.length > 0){%> // Checking if there are reports
<ul class="timeline">
<% for (let report of reports){ %>
<li class="timeline-yellow">
<div class="timeline-time">
<span class="date" style="text-align:left">
<%= report.type %>
4/10/13 </span>
<span class="time" style="font-weight:700;font-size:25px;line-
height:20px;text-align:left;">
<%= report.dateTime %> </span>
</div>
</li>
<% } %>
</ul>
<%}%>
<%}%>
다음은 loopback3 및 ejs를 사용한 작업 버전입니다.
서버/부트/경로에 있습니다.js:
module.exports = function(app) {
const router = app.loopback.Router();
router.get('/', function(req, res){
app.models.ZenGarden.find()
.then(plants => {
console.log('plants: ', plants)
res.render('index', {plants:plants})
}).catch(err => {
console.log('Failed to find in ZenGarden: ', err)
res.render('index')
})
});
router.post('/', function(req, res){
var plants = req.body.plants;
if (plants) {
for (var i = 0; i < plants.length; i++) {
console.log(plants[i])
app.models.ZenGarden.upsert(plants[i])
.then().catch(err => console.log(err))
}
}
return res.render('index', {plants:plants})
})
app.use(router);
};
server/views/index.ejs에서:
<div>
<form action='/' method='POST'>
<% if (plants) { %>
<table>
<tr><td>Name</td><td>Count</td></tr>
<% for (var i = 0; i < plants.length; i++) { %>
<tr>
<input type='hidden' value=<%= plants[i].id %> name='plants[<%= i %>][id]'>
<input type='hidden' value="<%= plants[i].name %>" name='plants[<%= i %>][name]'>
<td><%= plants[i].name %></td>
<td><input type='text' value=<%= plants[i].count %> name='plants[<%= i%>][count]'</td></tr>
<% } %>
</table>
<button type='submit'>Save</button>
<% } else { %>
<p>No plant in Zen Garden :-(</p>
<% } %>
</form>
</div>
server/server.js에서 다음을 추가해야 합니다.
const path = require('path')
const bodyparser = require('body-parser')
app.set('view engine', 'ejs')
app.set('views', path.resolve(__dirname, 'views'))
app.middleware('initial', bodyparser.urlencoded({extended:true}))
app.middleware('initial', bodyparser.json())
다음은 ZenGarden 모델(common/models/zen-garden.json)의 정의입니다.
{
"name": "ZenGarden",
"base": "PersistedModel",
"idInjection": true,
"options": {
"validateUpsert": true
},
"properties": {
"name": {
"type": "string",
"required": true
},
"count": {
"type": "number",
"required": true
}
},
"validations": [],
"relations": {},
"acls": [],
"methods": {}
}
언급URL : https://stackoverflow.com/questions/38179077/what-is-the-proper-way-to-loop-through-an-array-in-an-ejs-template-after-an-ajax
'programing' 카테고리의 다른 글
MySQL SELECT 쿼리에서 IF 문 사용 (0) | 2023.10.24 |
---|---|
WooCommerce : 상품이 품절되어 백오더를 허용하지 않는지 확인합니다. (0) | 2023.10.24 |
도커 컨테이너가 과도하게 작동하지 않는 것에 대해 우려해야 합니까? (0) | 2023.10.24 |
Matplotlib의 하위 그림에서 행 및 열 머리글 (0) | 2023.10.24 |
Oracle AQ SYS의 내용을 표시합니다.AQ$_JMS_TEXT_MESSAGE (0) | 2023.10.24 |