Question

我有一个EJS模板，我想在其中使用json数据。

我的json看起来像：

{
  "menu": {
    "id": "file",
    "value": "File"
  },
  "menu2": {
    "id": "file",
    "value": "File"
  }
}

在我将自己的json导出到我的nodejs应用中之后，便可以在任何地方使用此json，因为它将在我的导航栏中：

const navigation = require('./templates/partials/header/navigation.json');


app.use(function (req, res, next) {
    app.locals = {
        navigation: navigation
    };
....
});

然后我将自己的数据用于我的部分内容：

<%for(let el in navigation){%>
console.log(el) //return 'menu1' & 'menu2'
console.log(el.id) //return undefined & undefined
<%}%>

问题是第二个console.log，它返回未定义的值，我不知道为什么，有什么想法吗？

Answer 1

el是字符串，不是对象。 for-in循环遍历对象中的属性名称，而不是其值。要使用for-in循环访问属性的 value ，您必须通过方括号表示法（el）使用navigation[el]：

<%for(let el in navigation){%>
console.log(navigation[el].id)
<%}%>

但是在任何现代环境中，如果不需要属性名称，都可以改用Object.values和for-of：

<%for(let el of Object.values(navigation)){%>
console.log(el.id)
<%}%>

如果需要属性名称，请继续使用for-in（但正确），或者继续使用Object.entries，也许使用destructuring：

<%for(let [name, value] of Object.entries(navigation)){%>
console.log(name, value.id)
<%}%>

Answer 2

此外，如果您声明了局部变量，则可以使用req对象从控制器的任何部分进行访问

const navigation = require('./templates/partials/header/navigation.json');

   app.locals.navigation = navigation;

   router.get("/your_route", function(req, res, next) {
    res.status(200).json(req.app.locals.navigation)
   })

您还可以将其作为属性传递，

   router.get("/your_route", function(req, res, next) {
      res.render("your_template_name", {
       navigation:req.app.locals.navigation
      });
   })

  <ul
     <% navigation.forEach(function(el) { %>
     <li><%= el.value %></li> 
     <% }); %>
  </ul>

无法将json值访问到ejs模板中

2 个答案: