在 ejs 部分中迭代 JSON 对象

Posted 2023-03-07

【中文标题】在 ejs 部分中迭代 JSON 对象

【英文标题】：iterating over JSON object in ejs partial

【发布时间】：2016-09-13 18:40:36

【问题描述】：

我试图在 EJS 部分中循环遍历下面我的 JSON 文件中“默认”中的每个条目。

    "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 标签访问它。这是正确的理解吗？

【参考方案1】：

你可以使用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>

【讨论】：

这是正确的做法。有些人可能会推荐for ... in，但for ... in 非常危险。

【参考方案2】：

您的 json 仅包含对象，其中没有任何数组，因此您将无法使用 buttonsdata.length

显示整个对象 - 从控制器中显示对象，而不是模板。看看this answer 看看如何

这个对象可以通过 ejs 获得 - 是的，这是一个正确的理解 - 我假设 core javascript 你的意思是在浏览器中执行的 javascript。整个ejs模板在后端处理。

【讨论】：

谢谢。 1.将重组JSON 2.它只输出 [Object Object] ，这是否提供了我哪里出错的线索？ 3. 没错。

你是明星。这解决了它，只需要将它变成一个数组。现在更有意义了。亲切的问候

酷。我很高兴能帮上忙！