Me estoy enseñando a mí mismo JavaScript, y pensé que sería divertido hacer un generador de caracteres DnD para que lo usemos mis amigos y yo. Quiero usar esta API de DnD ( http://www.dnd5eapi.co/docs/#overview ) para buscar clases, razas, alineaciones, etc., pero la lectura que he hecho en API ha sido un poco confusa y no se muy bien como aplicarlo.
Quiero crear una serie de menús desplegables donde podamos seleccionar la clase, la raza y la alineación, y también tener una casilla de verificación junto a cada uno con la opción de aleatorizarlos. Sé que tengo que escribir la función fetch para eso, pero aquí es donde estoy perdido. ¿Cómo escribo realmente la función de búsqueda que llenará esos menús desplegables de la API?
Si bien puede hacer esto con JavaScript estándar, es mucho más fácil con JQuery. Puede completar los menús desplegables realizando algunas solicitudes GET a la API para obtener los datos y luego creando una <option> para cada elemento en los resultados.
$(document).ready(function() { // The things we want to get const fetchItems = [{ "endpoint": "/classes", "id": "#class" }, { "endpoint": "/races", "id": "#race" }, { "endpoint": "/alignments", "id": "#alignment" } ]; // For each category to fetch $.each(fetchItems, function(i, item) { // Get the data $.get("https://www.dnd5eapi.co/api" + item.endpoint, function(data) { // For each row in the data $.each(data.results, function(j, row) { // Create a new option in the corresponding <select> $(item.id).append($("<option>", { value: row.index, text: row.name })); }); }); }); }); <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <form> <label for="class">Class:</label> <select name="class" id="class"></select> <label for="race">Race:</label> <select name="race" id="race"></select> <label for="alignment">Alignment:</label> <select name="alignment" id="alignment"></select> </form> </body> </html>