Javascript 对象循环和呈现到HTML

我正在尝试将数据动态地呈现到我的HTML中，当单击

selectPlayer

时，数据应该显示一个播放器列表的下拉列表，并且可以选择

选择时，统计信息应同时显示在

我可以循环遍历对象，但如何将其动态地呈现在HTML上

卡片
选择一个玩家。。。
常数statsData={
玩家：[{
玩家：{
信息：{
位置信息：“防守者”
},
姓名：{
第一个：“托比”，
最后一句：“奥尔德韦雷德”
},
当前团队：{
名称：“托特纳姆热刺”
}
},
统计数据：[{
名称：“目标”，
价值：5
},
{
名称：“损失”，
价值：20
},
{
名称：“胜利”，
价值：48
},
{
名称：“抽签”，
价值：23
}
]
},
{
玩家：{
信息：{
位置信息：“中场”
},
姓名：{
第一个：“雅雅”，
最后：“图雷”
},
当前团队：{
名称：“曼彻斯特城”
}
},
统计数据：[{
名称：“目标”，
价值：65
},
{
名称：“损失”，
价值：49
},
{
名称：“胜利”，
价值：149
},
{
名称：“抽签”，
价值：35
}
]
},
{
玩家：{
信息：{
位置信息：“攻击者”
},
姓名：{
第一个：“Riyad”，
最后一句：“马雷兹”
},
当前团队：{
名称：“莱斯特市”
}
},
统计数据：[{
名称：“目标”，
价值：22
},
{
名称：“损失”，
价值：23
},
{
名称：“胜利”，
价值：35
},
{
名称：“抽签”，
价值：21
}
]
}
]
};
document.getElementById(
“选择播放器”
).innerHTML=`${statsData.players}`；
document.getElementById(
“统计数据”
).innerHTML=`${statsData.player.stats}`；

有很多方法可以做到这一点-一个简单的解决方法是，直接使用以下方法在文档中显示：

const statsData={
玩家：[{
玩家：{
信息：{
位置信息：“防守者”
},
姓名：{
第一个：“托比”，
最后一句：“奥尔德韦雷德”
},
当前团队：{
名称：“托特纳姆热刺”
}
},
统计数据：[{
名称：“目标”，
价值：5
},
{
名称：“损失”，
价值：20
},
{
名称：“胜利”，
价值：48
},
{
名称：“抽签”，
价值：23
}
]
},
{
玩家：{
信息：{
位置信息：“中场”
},
姓名：{
第一个：“雅雅”，
最后：“图雷”
},
当前团队：{
名称：“曼彻斯特城”
}
},
统计数据：[{
名称：“目标”，
价值：65
},
{
名称：“损失”，
价值：49
},
{
名称：“胜利”，
价值：149
},
{
名称：“抽签”，
价值：35
}
]
},
{
玩家：{
信息：{
位置信息：“攻击者”
},
姓名：{
第一个：“Riyad”，
最后一句：“马雷兹”
},
当前团队：{
名称：“莱斯特市”
}
},
统计数据：[{
名称：“目标”，
价值：22
},
{
名称：“损失”，
价值：23
},
{
名称：“胜利”，
价值：35
},
{
名称：“抽签”，
价值：21
}
]
}
]
};
document.getElementById（“stats”）.innerText=JSON.stringify（statsData.players）

选择一个玩家。。。
既然您希望能够选择一个播放器，请使用
元素。输出该select元素中可用的播放器。您可以通过为每个玩家创建一个
元素并将其添加到select元素中来实现这一点

//循环数组中的每个玩家，并使用每个玩家的player和info键。
for（statsData.players.entries（）的常量[index，{player，stats}]{
//获取每个玩家的姓名和信息。
const{name，info}=player；
//从name属性中获取名字和姓氏。
常量{first，last}=名称；
//从info属性中获取位置信息。
const{positionInfo}=info；
//创建一个包含玩家信息的选项元素，并将其添加到select元素中。
//索引是玩家数组中的位置数。
常量html=`${first}${last}`；
select.insertAdjacentHTML（'beforeend'，html）；
}

现在可以在列表中选择玩家。如果你想用你的播放器数据将另一个播放器添加到对象中，它也会出现在页面加载列表中

请查看下面的代码片段，以查看此操作


const statsData={
玩家：[{
玩家：{
信息：{
位置信息：“防守者”
},
姓名：{
第一个：“托比”，
最后一句：“奥尔德韦雷德”
},
当前团队：{
名称：“托特纳姆热刺”
}
},
统计数据：[{
名称：“目标”，
document.getElementById("stats").innerText = JSON.stringify(statsData.players);