Это мои данные JSON:

"data": [
  {
    "id": 1,
    "username": "admin",
    "name": "admin",
    "email": "admin@admin.com",
    "job_title": "admin",
    "created_at": null,
    "updated_at": null,
    "admin_role": {
      "id": 1,
      "user_id": 1,
      "name": "Admin",
      "created_at": "2018-10-23 11:00:55",
      "updated_at": "2018-10-23 11:00:58",
    }
  },
...

Я пытаюсь запустить цикл foreach, это мой код javascript:

 $.each(data, function (key, value) {
    rows = rows + '<tr>';
    rows = rows + '<td>' + value.username + '</td>';
    rows = rows + '<td>' + value.admin_role.name + '</td>';
    rows = rows + '<td data-id="' + value.id + '">';
    rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> ';
    rows = rows + '<button class="btn btn-danger remove-item">Delete</button>';
    rows = rows + '</td>';
    rows = rows + '</tr>';
});

Но строка value.admin_role.name выдает ошибку:

user.js: 66 Uncaught TypeError: Невозможно прочитать свойство name со значением null

Вот что я получаю, когда запускаю console.log(value):

enter image description here

0
story ks 23 Окт 2018 в 10:09

2 ответа

Лучший ответ

Перед доступом к какому-либо свойству объекта рекомендуется проверить, не является ли объект нулевым или неопределенным. В вашем случае admin_role имеет значение null и, следовательно, вы видите эту ошибку.

Измените свой метод на это:

 $.each(data, function (key, value) {
         var role_name = value.admin_role ? value.admin_role.name : '';

        rows = rows + '<tr>';
        rows = rows + '<td>' + value.username + '</td>';
        rows = rows + '<td>' + role_name  + '</td>';
        rows = rows + '<td data-id="' + value.id + '">';
        rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> ';
        rows = rows + '<button class="btn btn-danger remove-item">Delete</button>';
        rows = rows + '</td>';
        rows = rows + '</tr>';
    });
6
Ritesh 23 Окт 2018 в 07:31

Вам необходимо проверить значение, прежде чем вводить его в строку.

Наконец, чтобы добавить его в свой html, поскольку вы создаете его напрямую, вы можете сделать это, установив свойство innerHTML в требуемом элементе.

const data = [
  {
    username: "homer",
    admin_role:
      {
        name: "Nucelar security responsible"
      }
  },
  {
      username: "marge",
      admin_role: { 
        name: "Dangerous housekeeping" 
      }
  }, 
  {username: "bart"} 
];
let rows = '';
 $.each(data, function (key, value) {
    rows = rows + '<tr>';
    rows = rows + '<td>' + value.username + '</td>';
    rows = rows + '<td>' + (value.admin_role?value.admin_role.name:'No role provided') + '</td>';
    rows = rows + '<td data-id="' + value.id + '">';
    rows = rows + '<button data-toggle="modal" data-target="#edit-item" class="btn btn-primary edit-item">Edit</button> ';
    rows = rows + '<button class="btn btn-danger remove-item">Delete</button>';
    rows = rows + '</td>';
    rows = rows + '</tr>';
});

document.getElementById('root').innerHTML = rows;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="root"></div>
0
jmtalarn 23 Окт 2018 в 07:20
52943110