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

Question

所以我有一个来自我的数据库的数组。数组里面有一个对象。我有小时和员工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（它位于modal - bootstrap中）

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

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

员工ID来自一个数组，而来自另一个数组。不知何故，当我将log 2值控制在一起时，他们会将正确的id号分配给正确的小时数。

Answer 1

您在每次迭代时都设置innerHTML而不是添加它（因此只会显示最后一次迭代）。

以下是一个示例解决方案：

＆＃13;

＆＃13;

// 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)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

让我们做一些理论上的事情来更好地理解问题，因为理解潜在的问题是找到解决方案的关键。

想象一下，你有一个对象数组：

[{
  id: 1,
  x: 10,
}, {
  id: 2,
  x: 20,
}, {
  id: 3,
  x: 30,
}];

因此，您希望将此HTML标记放入任意DOM元素的innerHTML属性中：

<p>id: 1, x: 10</p>
<p>id: 2, x: 20</p>
<p>id: 3, x: 30</p>

（注意缺少一个共同的父母，这对innerHTML有效）

你可以通过for循环遍历一个对象数组，然后通过另一个for循环的每个对象的属性，就像你做的那样，只需要注意累积结果在任何这些循环的范围之外的某个地方，但最好是在将改变目标元素的innerHTML的函数范围内。像这样：

let result = '';

for (let i = 0; i < array.length; i++) {
  result += `<p>id: ${array[i].id}, x: ${array[i].x}</p>`;
}

element.innerHTML = result;

但更适合您的情况。

使用for循环让我们在Javascript社区中广泛遵循这样的做法：将map和reduce（请参阅Array#map和Array#reduce）应用于类似类型元素的集合。使用这种方法，代码看起来像：

element.innerHTML = array.reduce((total, current) => `${total}<p>id: ${current.id}, x: ${current.x}</p>`, '');

这可能看起来有点复杂，但效果完全相同。

请记住：如果你想添加某些字符串（即连接），请使用+=;如果您想替换其值，请使用=。