Estoy repasando mi jquery y me encontré con un obstáculo. Estoy devolviendo algunos datos json de una API de fútbol de fantasía y estoy tratando de descubrir cómo mapear los datos y asignar el propietario y el nombre de cada equipo a su propio div. Mi pregunta es esencialmente esta: ¿cómo puedo asignar el primer miembro de la matriz devuelta a la clase "jugador1", el segundo miembro de la matriz a la clase "jugador2" y así sucesivamente? Todo lo que he podido hacer es trazar un mapa sobre la matriz y mostrar todos los datos en un div, pero no sé cómo asignar a cada miembro de la matriz su propio div.
Aquí está la función de mapa que he estado utilizando:
$(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) } }) })Obviamente, esto agrega todos los datos a la clase "jugador1", solo necesito averiguar cómo asignar los datos como mencioné anteriormente. ¡Gracias por adelantado!
En su pregunta, menciona clases, pero el selector jQuery que está usando, # , es para ID. El selector de clase utiliza un .
En cualquier caso, puede iterar sobre los datos devueltos por la API y usar el índice del ciclo para construir dinámicamente su selector:
playerData.forEach((player, item) => { $(`#player${item}`).append(player); });Ejemplo usando tu código:
$(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>