javascript - 循环遍历对象数组并返回这些对象的累积数据

Question

所以我有一个来 self 的数据库的数组。数组里面有一个对象。我在网页上有工作时间和员工 ID 以及员工列表。当我单击员工时，我想查看分配给该员工的小时数。

var makeup_hrs = api_resp.makeup_data[key];

for (var i = 0; i < makeup_hrs.length; i++) {
  var obj = makeup_hrs[i];
  console.log(obj);
  for (var o in obj) {
    var y = obj[o];
    console.log("make up hours ", y, "id: ", emp_id)

    var x = document.getElementById("makeUpHours").innerHTML = y;
    console.log(x);

    // $('#makeUpHours').html(y);
  }
}

每当我打印化妆时间和 emp_id - 它都会给我该员工的号码和他的工时值。但是当我使用innerHTML时，它只显示最后几个小时的值，而不是特定员工的特定小时。

像这样(控制台输出)我的数据库中目前只有 2 名员工:

 make up hours  4 id:  2891
make up hours  7 id:  1978

这是我的 html(它位于模态 - Bootstrap 内部)

<div class="form-group">   <label class="col-sm-3"> Hours </label> 
  &nbsp;<span id="makeUpHours"></span></div>

当我点击图标时 - 模式会弹出。每个图标都分配给一个员工 ID

员工 ID 来自一个数组，小时数来自另一个数组。不知何故，当我控制台同时记录 2 个值时，它们将正确的 ID 号分配给正确的小时数。

Answer 1

您在每次迭代中设置 innerHTML 而不是添加到其中(因此只会显示最后一次迭代)。

这是一个示例解决方案:

// sample data
const employees = [{
  name: 'Bob',
  hours: 10
}, {
  name: 'Jane',
  hours: 15
}, {
  name: 'John',
  hours: 20
}]

const ul = document.getElementById('employees')

// how you want to represent an employee's info
const stringifyData = employee => `${employee.name}: ${employee.hours} hours`

// add employee HTML 
const addEmployee = str => {
  ul.innerHTML += `<li>${str}</li>`
}

// iterate
employees.map(stringifyData).forEach(addEmployee)

<ul id="employees"></ul>

我更喜欢将数据转换与 DOM 操作分开(更容易测试)，但您当然可以在一次迭代中完成这两项操作。