Tengo que obtener los nombres de los personajes (no las URL) como salida en $(obj.characters) Pero no estoy seguro de cómo implementarlo. También necesito cinco nombres solo usando for loop. Tengo estos dos problemas para aclarar.
API: https://www.anapioficeandfire.com/api/books
document.body.innerHTML=`<div class="heading-container"> <h1>An Ice and Fire<h1> </div> <div id="mainContainer" class="main-container"></div>`; const getData=async() => { try{ const data=await fetch("https://www.anapioficeandfire.com/api/books") const books= await data.json() mainContainer.innerHTML=""; books.forEach(book => { displayData(book) }); }catch(error) { console.log(error) } }; getData(); const displayData=(obj)=> { mainContainer.innerHTML+=` <div class="container"> <h1 class="css1">Name:<span>${obj.name}</span>, ISBN:<span> ${obj.isbn}</span></h1> <h2 class="css2"> Authors:<span>${obj.authors}</span></h2> <h3 class="cs3"> Number of Pages:<span>${obj.numberOfPages}</span><h3> <h4 class="css5">Publisher Name:<span>${obj.publisher}</span> , Release Date:<span>${obj.released}</span></h4> <h4 class="css6">Characters${obj.characters}</span></h4> </div>`}
En mi humilde opinión, tienes cosas demasiado de un solo uso. Mi implementación es crear un "getUrl" genérico para obtener cualquier recurso de su API elegida, que luego se puede reutilizar para iterar a través de los caracteres cuando lo necesite.
Observar:
const books = []; getUrl = async(url) => { try { const data = await fetch(url); return await data.json(); } catch (error) { console.log('Failed to retrieve data: ', error); } } getBooks = () => { getUrl("https://www.anapioficeandfire.com/api/books").then(data => { data.forEach(b => { const book = { Name: b.name, ISBN: b.isbn, Authors: b.authors, Pages: b.numberOfPages, Publisher: b.publisher, Released: b.released }; let characters = [], charLen = b.characters.length >= 5 ? 5 : b.characters.length; for (let i = 0; i < charLen; i++) { getUrl(b.characters[i]).then(c => characters.push(c.name)); } book.Characters = characters; books.push(book); }); }); } getBooks(); console.log(books); Esto creará un objeto de libros constante que satisfará sus necesidades en su función displayData anterior (con nombres de propiedad en mayúscula). En mi opinión, también debe desempaquetar las listas de autores y personajes usando <ul><li> , ya que es posible que los datos no se presenten tan estéticamente como cabría esperar con el marcado actual.