Tengo un código básico que usa fetch() para obtener un json de una API. Luego "clasifico" (no sé si esa es la palabra correcta) a través de las "capas" (nuevamente, no sé la palabra) para obtener (por ejemplo) la cantidad de muertes que han obtenido en un determinado modo de juego en un servidor de Minecraft. El problema es que me gustaría comprobar otra estadística, por ejemplo, los partidos jugados. No puedo volver a obtener los datos de la API porque solo puedes obtener datos de cada jugador una vez por minuto. El problema es que cuando trato de usar el resultado de fetch () nuevamente, no funciona porque creo que se cumplió la promesa (soy realmente nuevo en Java Script). Aquí está el código:
<body> <form> <label for="fname">Username:</label><br> <input type="text" id="username" name="username"><br> </form> <p class="costs" id="kills">Hello!</p> <script> function BedwarsKills() { var queryString = location.search; // Returns:'?q=123' let params = new URLSearchParams(queryString); let q = params.get("username"); // is the number 123 console.log(q) url = "https://api.hypixel.net/player?name="+q+"&key=d3a8fade-b2e6-4a3b-8239-e11a1c9a52d4" console.log(url) fetch(url) .then(response => response.json()) .then(data => data.player.stats.Bedwars.kills_bedwars) .then(data => document.getElementById("kills").innerHTML = q + " has " + data + " kills") } BedwarsKills() </script> </body>Solo para aclarar, me gustaría agregar algo más como estas 2 líneas
.then(data => data.player.stats.Bedwars.kills_bedwars) .then(data => document.getElementById("kills").innerHTML = q + " has " + data + " kills")pero usando wins_bedwars en lugar de kills_bedwars usando lo mismo para buscar. ¿Algunas ideas?
(avísame si necesitas saber algo más)
No debe usar dos llamadas .then() para funciones sincrónicas. Puede lograr lo mismo con una sola función de devolución de llamada y una variable local:
fetch(url) .then(response => response.json()) .then(data => { const kills = data.player.stats.Bedwars.kills_bedwars; document.getElementById("kills").innerHTML = q + " has " + kills + " kills"); }); Puede poner fácilmente varias declaraciones en la función, tantas como desee, incluidas algunas para wins_bedwars además de las de kills_bedwars .
Dado que Promise Chain es una especie de tubería, debe colocar todos los datos en la tubería a la vez, como:
fetch(url) .then(response => response.json()) .then(data => data.player.stats.Bedwars) .then(data => { document.getElementById("kills").innerHTML = q + " has " + data.kills_bedwars + " kills"); document.getElementById("wins").innerHTML = q + " has " + data.wins_bedwars + " wins"); });