Estoy tratando de descubrir cómo mostrar información de una API en una selección.
El usuario tiene que seleccionar una estación de inicio con el mismo vinculado a la API. Pero no puedo crear la opción, teniendo los nombres de cada estación, en mi selección.
¿Puedes ayudarme a entender mi error?
<section class="container"> <div class="item"> <p>list</p> <select id="subwaystation"> </select> var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8"; function req1() { fetch(apiStations, { method: "get" }) .then(response => response.json()) .then(data => { let allstations= data.result.stations; for(var i = 0; i < allstations.length; i++) { html += "<option value=" + key + ">" +obj[key] + "</option>" } document.getElementById("subwaystation").innerHTML = html; }) } req1();Su código contiene algunos errores simples que debería poder ver en la consola de su navegador, lo que le daría pistas sobre por qué no funciona.
Primero verá que html no está definido antes de intentar agregarlo. No se puede añadir a algo que no existe.
si arregla eso, verá esa key y luego obj tampoco están definidos. No está claro de dónde esperaba que vinieran o qué cree que contendrían. Me pregunto si simplemente copió y pegó un código que encontró sin detenerse a examinarlo correctamente o considerar si encaja con el contexto en el que lo pegó.
Puede solucionar estos problemas de manera muy sencilla al
html como una cadena vacía antes de que comience su ciclo, por lo que += tiene algo para agregar<option , haciendo referencia al objeto de la estación en el índice actual ( i ) del ciclo y luego las propiedades específicas que se encuentran en ese objeto ( slug y name , como se muestra en el JSON sin procesar), en lugar de usar key y obj que no provengan de ningún otro lugar en su código.Manifestación:
var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8"; function req1() { fetch(apiStations, { method: "get" }) .then(response => response.json()) .then(data => { let allstations = data.result.stations; let html = ''; for (var i = 0; i < allstations.length; i++) { html += "<option value=" + allstations[i].slug + ">" + allstations[i].name + "</option>" } document.getElementById("subwaystation").innerHTML = html; }) } req1(); <select id="subwaystation"> </select>