Это мои данные 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):
0
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
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
23 Окт 2018 в 07:20