如何在 Javascript DOM 中的 fetch 中实现 fetch

Question

我必须将字符名称（不是 URLS）作为 $(obj.characters) 的输出，但我不确定如何实现它。我还需要五个仅使用 for 循环的名称。我有这两个问题需要解决。

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>`

}

Answer 1

在我看来，你的东西太一次性了。我的实现是创建一个通用的“getUrl”来从您选择的 API 中获取任何资源，然后可以在需要时重复使用这些资源来遍历字符。

观察：

    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);

这将创建一个常量书籍对象，它将满足您在上面的displayData 函数中的需求（使用大写的属性名称）。我认为您还应该使用 <ul><li> 解压缩作者和角色列表，因为数据可能不会像您当前的标记所期望的那样美观。