代码之家 › 专栏 › 技术社区 › story ks

javascript如何foreach显示数据json对象

javascript

story ks · 技术社区 · 7 年前

这是我的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未捕获的TypeError:无法读取null的属性'name'

console.log(value) :

2 回复 | 直到 7 年前

Ritesh Waghela 7 年前

将方法更改为:

 $.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>';
    });

jmtalarn 7 年前

在将其设置为字符串之前,需要检查该值。

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前