无法读取视图引擎节点 js 中未定义的属性"名字"

Question

我正在尝试使用视图引擎 （ejs） 在网站上显示 json 数据，但我面临以下错误Cannot read property 'firstname' of undefined这是我的程序

节点.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

Answer 1

如果你有数据作为你显示的对象，那么"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。

Answer 2

就像我之前想说的。 将对象转换为数组更好。 因为如果您使用的是哈希图结构，则可以深度嵌套。 示例是如下所示的对象

  {"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 3

您需要

在 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