我如何从ajax响应中添加json数据到多个类

Question

我正在复习我的jquery，我遇到了一个障碍。我从一个梦幻足球api返回一些json数据，我试图找出如何映射数据和分配每个球队的所有者和名称到自己的div。我的问题本质上是这样的:我如何能分配返回数组的第一个成员到类"player1"数组的第二个成员到类"player2"等等......我所能做的就是映射数组并在一个div中显示所有数据，但我不知道如何为每个数组成员分配自己的div。

这是我一直在使用的map函数:

$(document).ready(function() {
$.ajax({
url: 'https://api.sleeper.app/v1/league/784456593403224064/users',
type: 'GET',
success: function(result) {
playerData = result.map(result => result.display_name);
console.log(playerData);
$("#player1").append(JSON.stringify(playerData));
// playerData = result
// console.log(playerData)
},
error: function(err) {
console.log(err)
}
})
})

显然，这会将所有数据附加到"player1"类，我只需要弄清楚如何分配数据，就像我上面提到的。提前感谢!

Answer 1

在您的问题中，您提到了类，但您正在使用的jQuery选择器#用于id。类选择器使用.

在任何情况下，您都可以遍历API返回的数据，并使用循环的索引来动态构建选择器:

playerData.forEach((player, item) => {
$(`#player${item}`).append(player);
});

使用代码的例子:

$(document).ready(function() {
$.ajax({
url: 'https://api.sleeper.app/v1/league/784456593403224064/users',
type: 'GET',
success: function(result) {
playerData = result.map(result => result.display_name);
playerData.forEach((player, item) => {
$(`#player${item}`).append(player);
});
},
error: function(err) {
console.log(err)
}
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<div id="player4"></div>
<div id="player5"></div>
<div id="player6"></div>
<div id="player7"></div>
<div id="player8"></div>
<div id="player9"></div>