Не удается прочитать свойство 'firstname' из неопределенного в узле механизма просмотра js - PullRequest
Новая
       29

Не удается прочитать свойство 'firstname' из неопределенного в узле механизма просмотра js

0 голосов
/ 02 января 2019

Я пытаюсь отобразить данные json на веб-сайте с помощью механизма просмотра (ejs), но я сталкиваюсь со следующей ошибкой 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 ]

0 голосов
/ 02 января 2019

вам нужно внести несколько изменений, как показано ниже в вашем файле 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

0 голосов
/ 02 января 2019

Если у вас есть данные как отображаемый объект, тогда ключом будет ключ элемента, и вам необходимо использовать обозначение доступа к ключу для объекта таким образом: 

<ul class="list-group list-group-flush">
    <% for(var key in data){%>
        <li class="list-group-item"><%= data[key].firstname %></li><%}%>
</ul>

ключ дляпервый элемент будет «id01», так что это эквивалентно (на первом проходе) высказыванию data.id01.firstname.

0 голосов
/ 02 января 2019

Как я пытался сказать ранее.Превратить объект в массив лучше.Потому что, если вы используете структуру 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>
...