在 ejs partial 中迭代 JSON 对象
iterating over JSON object in ejs partial
我试图在下面的 JSON 文件中的 EJS 部分中遍历 "default" 中的每个条目。
{
"default": {
"1": {
"id": "alertmessages",
"title": "Your Messages",
"subtitle": "Tasks waiting for your attention",
"image": "alert.png",
},
"2": {
"id": "uploadr",
"title": "Upload",
"subtitle": "Upload",
"image": "baskets.png",
},
etc............
}
}
我正在将此 JSON 文件读入我的 node.js,对其进行解析并使其可用于我的仪表板视图。如下
var jsondata = JSON.parse(require('fs').readFileSync('./app/routes/dashboard/buttons.json', 'utf8'));
var content = {
title: 'Dashboard',
user: req.user,
buttonsdata: jsondata
};
res.render('dashboard', content);
我的仪表板视图包含一个 ejs 部分,我试图在其中遍历默认包含的所有对象(这个数字可能会有所不同)。我想在没有 Jquery 的情况下执行此操作。但是我在其他线程上发现的任何建议都无法正常工作。
console.log("<%= buttonsdata.default.[1].id %>")
给了我我所期望的,但是如果我尝试控制台日志 buttons.length,它在我看到的循环示例中使用,它只是空白.
另外,如何通过控制台记录对象的全部内容以查看其结构?
第三 - 这个对象,据我所知,可以通过 ejs 获得,但不能进入核心 javascript,我只能使用 ejs <% %> 标签访问它。这样理解正确吗?
您的 json 仅包含对象,其中没有任何数组,因此您将无法使用 buttonsdata.length
显示整个对象 - 从您的控制器中显示对象,而不是您的模板。看看this answer就知道如何
这个对象可以通过 ejs - 是的,这是一个正确的理解 - 我假设 core javascript 你的意思是在浏览器中执行的 javascript 。整个ejs模板都是在后端处理的
您可以使用 Object.keys():
const buttonsdata = {
"default": {
"1": {
"id": "alertmessages",
"title": "Your Messages",
"subtitle": "Tasks waiting for your attention",
"image": "alert.png",
},
"2": {
"id": "uploadr",
"title": "Upload",
"subtitle": "Upload",
"image": "baskets.png",
}
}
};
Object.keys(buttonsdata.default).forEach(function (key) {
console.log(buttonsdata.default[key].id);
});
现在,根据您的代码,在视图中应该像这样工作:
<ul>
<% Object.keys(buttonsdata.default).forEach(function(key) { %>
<li><%= buttonsdata.default[key].id %></li>
<% }) %>
</ul>
我试图在下面的 JSON 文件中的 EJS 部分中遍历 "default" 中的每个条目。
{
"default": {
"1": {
"id": "alertmessages",
"title": "Your Messages",
"subtitle": "Tasks waiting for your attention",
"image": "alert.png",
},
"2": {
"id": "uploadr",
"title": "Upload",
"subtitle": "Upload",
"image": "baskets.png",
},
etc............
}
}
我正在将此 JSON 文件读入我的 node.js,对其进行解析并使其可用于我的仪表板视图。如下
var jsondata = JSON.parse(require('fs').readFileSync('./app/routes/dashboard/buttons.json', 'utf8'));
var content = {
title: 'Dashboard',
user: req.user,
buttonsdata: jsondata
};
res.render('dashboard', content);
我的仪表板视图包含一个 ejs 部分,我试图在其中遍历默认包含的所有对象(这个数字可能会有所不同)。我想在没有 Jquery 的情况下执行此操作。但是我在其他线程上发现的任何建议都无法正常工作。
console.log("<%= buttonsdata.default.[1].id %>")
给了我我所期望的,但是如果我尝试控制台日志 buttons.length,它在我看到的循环示例中使用,它只是空白. 另外,如何通过控制台记录对象的全部内容以查看其结构? 第三 - 这个对象,据我所知,可以通过 ejs 获得,但不能进入核心 javascript,我只能使用 ejs <% %> 标签访问它。这样理解正确吗?
您的 json 仅包含对象,其中没有任何数组,因此您将无法使用
buttonsdata.length
显示整个对象 - 从您的控制器中显示对象,而不是您的模板。看看this answer就知道如何
这个对象可以通过 ejs - 是的,这是一个正确的理解 - 我假设 core javascript 你的意思是在浏览器中执行的 javascript 。整个ejs模板都是在后端处理的
您可以使用 Object.keys():
const buttonsdata = {
"default": {
"1": {
"id": "alertmessages",
"title": "Your Messages",
"subtitle": "Tasks waiting for your attention",
"image": "alert.png",
},
"2": {
"id": "uploadr",
"title": "Upload",
"subtitle": "Upload",
"image": "baskets.png",
}
}
};
Object.keys(buttonsdata.default).forEach(function (key) {
console.log(buttonsdata.default[key].id);
});
现在,根据您的代码,在视图中应该像这样工作:
<ul>
<% Object.keys(buttonsdata.default).forEach(function(key) { %>
<li><%= buttonsdata.default[key].id %></li>
<% }) %>
</ul>