Javascript 呈现用户信息的算法建议

我正在学习多维数组/对象。我想测试这个想法，并尝试了我能想到的一切，但我找不到正确的解决方案

假设一个游戏中有3个注册的“用户”。当他们登录时，它将呈现玩家信息，如ID、级别和HP。您将如何构建此功能

我是新来的，所以请用香草JS。另外，这个场景只是为了练习，所以请不要提及任何关于服务器的内容

<label>User ID:</label>
<input type='text'></input>
<br>
<label>User PW:</label>
<input type='text'></input>
<br>
<button id='demoButton'>Log in</button>

<table>
    <tr>
        <th colspan='2'>Outcome</th>
    </tr>
    <tr>
        <th>ID:</th>
        <td></td>
    </tr>
    <tr>
        <th>LEVEL:</th>
        <td></td>
    </tr>
    <tr>
        <th>HP:</th>
        <td></td>
    </tr>
</table>

<script>

var allPlayers = {
    'player1': ['id1', 55, 100],
    'player2': ['id2', 12, 50],
    'player3': ['id3', 123, 1000]
};

*// What kind of function to write?*

</script>

用户ID:


用户密码：


登录
结果
身份证件：
级别：
惠普：
var所有玩家={
‘player1’：[id1'，55100]，
‘player2’：[id2'，12,50]，
‘player3’：[id3'，1231000]
};
*//写什么样的函数*

下一个函数将对您有所帮助。您可以创建一个函数“showObjectData”，它接收像“AllPlayer”这样的对象，并使用object.entries方法。通过这个方法，您将得到一个包含所有键/值对的数组，由于数组是可迭代的，您可以使用forEach方法来打印每个元素并访问元素[1]，它是您可以迭代的另一个数组

var allPlayers = {
  'player1': ['id1', 55, 100],
  'player2': ['id2', 12, 50],
  'player3': ['id3', 123, 1000]
};

function showObjectData(obj) {
   Object.entries(obj).forEach(element => {
   console.log(element);
   });
}

showObjectData(allPlayers);

---

请不要只发布代码作为答案，还要解释代码的作用以及它是如何解决问题的。带有解释的答案通常质量更高，更容易吸引选票。