Estoy tratando de extraer el contenido de la biblia ASV de la API en biblia.api y completar mi menú desplegable de selección con los datos, sin embargo, estoy haciendo algo mal ya que los datos no están completando mi menú desplegable de selección. Sin embargo, sé que el punto final es correcto y carga el objeto json con el contenido de la biblia en mi consola.
$(document).ready(function(){ let dropdown = document.getElementById('books'); dropdown.length = 0; let defaultOption = document.createElement('option'); defaultOption.text = 'Choose Book of the Bible'; dropdown.add(defaultOption); dropdown.selectedIndex = 0; const url = 'https://api.biblia.com/v1/bible/contents/ASV?key=aa43781d7b806b8d6764191dce895e10'; const request = new XMLHttpRequest(); request.open('GET', url, true); request.onload = function() { if (request.status === 200) { const books = JSON.parse(request.responseText); let option; for (let i = 0; i < books.length; i++) { option = document.createElement('option'); option.text = books[i].passage; option.value = books[i].passage; dropdown.add(option); console.log(books[i].passage); } } else { // Reached the server, but it returned an error } } request.onerror = function() { console.error('An error occurred fetching the JSON from ' + url); }; request.send();Considera lo siguiente.
$(function() { function loadSelect(target, url) { var dropdown = $(target); var defaultOption = $('<option>').html("Choose Book of the Bible").appendTo(dropdown); $.getJSON(url, function(results) { $.each(results.books, function(i, book) { $("<option>", { value: i }).html(book.passage).appendTo(dropdown); }); }); } loadSelect("#books", "https://api.biblia.com/v1/bible/contents/ASV?key=aa43781d7b806b8d6764191dce895e10"); }); Se considera una mejor práctica usar todo JavaScript o jQuery y no mezclarlos. Es posible que desee utilizar $.getJSON() .
Su problema es que está iterando sobre "responseText", que contiene solo un elemento llamado libros.
Para hacer lo que intenta lograr, debe usar algo así en su función request.onload :
const data = JSON.parse(request.responseText); const books = data.books;