无法读取视图引擎节点 js 中未定义的属性 'firstname'

Question

我正在尝试使用视图引擎 (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>

json文件

{
    "id01":{"firstname":"abc","lastname":"xy"},
    "id02":{"firstname":"pqr","lastname":"xy"}
}

错误

Cannot read property 'firstname' of undefined

Answer 1

就像我之前想说的。将对象转换为数组更好。因为如果您使用的是 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>

Answer 2

您需要在 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 而不是数据。key.firstname

Answer 3

如果您将数据作为您显示的对象，那么 '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。

无法读取视图引擎节点 js 中未定义的属性 'firstname'

Cannot read property 'firstname' of undefined in view engine node js

json

ejs

viewengine

node.js

无法读取视图引擎节点 js 中未定义的 属性 'firstname'

Cannot read property 'firstname' of undefined in view engine node js

json

ejs

viewengine

node.js

无法读取视图引擎节点 js 中未定义的属性 'firstname'