在对象的javascript数组中的html表中按列转换行数据

Question

下面我有一个 javascript 中的对象数组

[0] => stdClass Object
    (
        [id] => 12951
        [user_id] => 1
        [balance_amt] => 100
        [year] => 2020
        [username] => User1
    )

[1] => stdClass Object
    (
        [id] => 11751
        [user_id] => 2
        [balance_amt] => 100
        [year] => 2020
        [username] => User2
    )

[2] => stdClass Object
    (
        [id] => 12816
        [user_id] => 1
        [balance_amt] => 100
        [year] => 2021
        [username] => User1
    )

[3] => stdClass Object
    (
        [id] => 11014
        [user_id] => 3
        [balance_amt] => 0
        [year] => 2020
        [username] => User3
    )

[4] => stdClass Object
    (
        [id] => 11817
        [user_id] => 2
        [balance_amt] => 100
        [year] => 2021
        [username] => User2
    )

[5] => stdClass Object
    (
        [id] => 12466
        [user_id] => 3
        [balance_amt] => 100
        [year] => 2021
        [username] => User3
    )

[6] => stdClass Object
    (
        [id] => 10664
        [user_id] => 3
        [balance_amt] => 0
        [year] => 2022
        [username] =>User3
    )

[7] => stdClass Object
    (
        [id] => 8944
        [user_id] => 3
        [balance_amt] => 100
        [year] => 2023
        [username] => User3
    )

[8] => stdClass Object
    (
        [id] => 7269
        [user_id] => 1
        [balance_amt] => 0
        [year] => 2022
        [username] => User1
    )

[9] => stdClass Object
    (
        [id] => 5632
        [user_id] => 2
        [balance_amt] => 0
        [year] => 2022
        [username] => User2
    )

[10] => stdClass Object
    (
        [id] => 4034
        [user_id] => 3
        [balance_amt] => 0
        [year] => 2024
        [username] => User3
    )

[11] => stdClass Object
    (
        [id] => 2476
        [user_id] => 2
        [balance_amt] => 0
        [year] => 2023
        [username] => User2
    )

使用上面的数据，我在如下表中显示记录

用户名	年	平衡
用户1	2020	100
用户1	2021	100
用户1	2022	0
用户2	2020	100
用户2	2021	100
用户2	2022	0
用户2	2023	0
用户3	2020	0
用户3	2021	100
用户3	2022	0
用户3	2023	100
用户3	2024	0

但我想显示如下表所示的结果

用户名	2020	2021	2022	2023	2024
用户1	100	100	0	-	-
用户2	100	100	0	0	-
用户3	0	100	0	100	0

我尝试了代码，但没有得到结果。所以我将不胜感激任何帮助！

response.reduce((a2, c2) => { 让filteredP = a2.filter(el => el.year === c2.year) if (filteredP.length > 0) { a2[a2.indexOf(filteredP[ 0])].balance_amt += +c2.balance_amt; } else { a2.push(c2); }, []);

Answer 1

我解决这个问题的方法是根据您的数据构建用户列表和年份列表。然后从这些新列表中创建您想要的表。

下面是一个例子。

注意：您可能希望将年份放入数组中并对它们进行排序，因为对象的属性可以按任何顺序排列。我会把它留给你作为练习。

let Users = {}  // {name:{year:amount}, name:{year:amount}, ... }
let Years = {}  // {year:true, year:true, ...}  //
let UserData = [
  { id: 12951, user_id: 1, balance_amt: 100, year: 2020, username: "User1" },
  { id: 11751, user_id: 2, balance_amt: 456, year: 2023, username: "User2" }
]


function doTest( ) {
  buildUsersAndYears( )
  createTable( )
}


function buildUsersAndYears( ) {
  // Build lists of Users and Years from the data
  for( let user of UserData ) {
    if( !Users[user.username] ) Users[user.username] = {}
    Users[user.username][user.year] = user.balance_amt

    Years[user.year] = true // Could be anything, just need a property
  }
}


function createTable( ) {
  let table = document.createElement( "table" )
  let tableHtml = ""


  tableHtml = "<thead><tr> <th>Username</th> "
  for( let year in Years ) {
    tableHtml += `<th>${year}</th>`
  }
  tableHtml += "</tr></thead>"

  tableHtml += "<tbody>"
  for( let user in Users ) {
    tableHtml += `<tr> <td>${user}</td>`
    for( let year in Years ) {
      tableHtml += `<td>${Users[user][year]!=undefined ? Users[user][year] : ""}</td>`
    }
    tableHtml += `</tr>`
  }
  tableHtml += "</tbody>"

  table.innerHTML = tableHtml
  document.querySelector( "#TestAreaID" ).appendChild( table )  // Finaly add the table to the DOM
}

<div id="TestAreaID">
</div>