遍歷對象數組並從這些對象返回累積的數據

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（位於模式-引導程序內部）

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

當我單擊圖標時，將彈出模式對話框。 每個圖標都分配給一個員工編號

員工ID來自一個數組，幾個小時來自另一個數組。 我以某種方式將兩個日志值一起控制台時，它們將正確的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操作分開（更易於測試），但是您當然可以在一個迭代中完成這兩個操作。

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>`, '');

看起來有些令人費解，但效果卻完全相同。

請記住：如果要向字符串中添加內容 （即，串聯），請使用+= ； 如果要替換其值，請使用= 。