无法读取视图引擎节点js中未定义的属性'firstname‘
无法读取视图引擎节点js中未定义的属性'firstname‘
提问于 2019-01-03 02:28:15
我正在尝试使用视图引擎(ejs)在网站上显示json数据，但我面临以下错误Cannot read property 'firstname' of undefined这是我的程序
node.js
io.readEmp().then(function(data){
res.render('Dashboard',{data:data});
}).catch(function(err){console.log(err.message);});index.ejs
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item"><%= data.key.firstname %></li><%}%>
</ul>jsonfile文件
{
"id01":{"firstname":"abc","lastname":"xy"},
"id02":{"firstname":"pqr","lastname":"xy"}
}错误
Cannot read property 'firstname' of undefined回答 3
Stack Overflow用户
回答已采纳
发布于 2019-01-03 03:03:18
如果像您显示的那样将数据作为对象，则“key”将是项键，因此您需要使用对象的键访问表示法：
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item"><%= data[key].firstname %></li><%}%>
</ul>第一项的“‘key”将是"id01"，所以这相当于(在第一次传递时)说data.id01.firstname。
Stack Overflow用户
发布于 2019-01-03 02:42:51
就像我之前想说的那样。将对象转换为数组会更好。因为如果您使用的是hashMap结构，它们可能会嵌套得很深。下面是一个对象的例子
{"id01":{
"address": {
"street": "123 Main St",
"city": "San Francisco",
"state": "CA"
},
"dogs": {
"spot": {
"type": "German Shepherd",
"foods": {
"soft" : {
"Purina": "Cat Chow"
},
"unconventional": {
"vomit": "Vomit",
"squirrels" : "Squirrels"
}
}
},
"spike": {
"type": "Doberman"
}
}
}}使用所建议的方法将产生类似以下内容的结果。
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item"><%= data[key].firstname %></li>
<li class="list-group-item"><%= data[key].address.street %></li>
<li class="list-group-item"><%= data[key].address.city %></li>
<li class="list-group-item"><%= data[key].address.state %></li>
<li>
<ul>
<% for(var dogKey in data[key].dogs){%>
<li class="list-group-item"><%= data[key].dogs[dogKey].type %></li>
<li>
<ul>
<% for(var dogFoodKey in data[key].dogs[dogKey].foods){%>
<li class="list-group-item"><%= data[key].dogs[dogKey].foods[dogFoodKey]. %></li>
<%}%>
</ul>
</li>
<%}%>
</ul>
</li>
<%}%>
</ul>这里乱七八糟。它需要一次认真的重构。作为一种练习，你不应该重复自己。
相反，我建议使用以下方法，在对象接收时将其重写到数组中。
<ul class="list-group list-group-flush">
<% for(var person in Object.values(data)){%>
<li class="list-group-item"><%= person.firstname %></li>
<li class="list-group-item"><%= person.address.street %></li>
<li class="list-group-item"><%= person.address.city %></li>
<li class="list-group-item"><%= person.address.state %></li>
<li>
<ul>
<% for(var dog in person.dogs){%>
<li class="list-group-item"><%= dog.type %></li>
<li>
<ul>
<% for(var food of Object.values(dog.foods)){%>
<li class="list-group-item"><%= food %></li>
<%}%>
</ul>
</li>
<%}%>
</ul>
</li>
<%}%>
</ul>Stack Overflow用户
发布于 2019-01-03 02:57:58
您需要在index.ejs文件中进行少量更改，如下所示
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item">
<%= key.firstname %>
</li>
<%}%>
</ul>注意:您必须使用key.firstname而不是data.key.firstname
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54011361
复制相关文章
相似问题