html 显示所有动画数据[Jikan.moe API v4] [已关闭]

myzjeezk 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(94)

已关闭。此问题需要超过focused。当前不接受答案。
**想要改进此问题吗？**更新此问题，使其仅关注editing this post的一个问题。

7小时前关闭。
Improve this question
我试图显示名称，概要，类型和总的插曲，所有的动画从API。但我不知道如何做到这一点。
例如，当我获取https://api.jikan.moe/v4/anime?q=Bocchi%20The%20Rock&sfw时，我想显示所有动画的数据，即Bocchi The Rock，按Rock显示！！但它只显示Bocchi The Rock。

<!DOCTYPE html>
<html>
  <head>
    <title>Y</title>
  </head>
  <body>
    <h1>Anime</h1>
    <form>
      <label for="anime-name">Enter anime name:</label><br>
      <input autocomplete="off" type="text" placeholder="anime..." id="anime-name" name="anime-name"><br> <p></p>
      <button type="button" onclick="getAnimeData()">Submit</button>
    </form>
    <div id="anime-data"></div>
    <script>
      const API_URL = 'https://api.jikan.moe/v4';
      function getAnimeData() {
        const animeName = document.getElementById('anime-name').value;
        fetch(`${API_URL}/anime?q=${animeName}&limit=1`)
          .then(response => response.json())
          .then(data => {
            const anime = data.data[0];
            const imageUrl = data.data[0].images;
            const animeDataDiv = document.createElement('div');
            animeDataDiv.innerHTML = `
            <p></p>
              <img src ="${imageUrl.jpg.image_url}">
              <p><b>Title:</b> ${anime.title}</p>
              <p><b>Local Name:</b> ${anime.title_japanese} <p>
              <p><b>Synopsis:</b> ${anime.synopsis}</p>
              <p><b>Type:</b> ${anime.type}</p>
              <p><b>Total Episodes:</b> ${anime.episodes}</p>
            `;
            
            document.getElementById('anime-data').appendChild(animeDataDiv);
          });
      }

    </script>
  </body>
</html>

我是JavaScript新手，所以我不知道该怎么做

Html

来源：https://stackoverflow.com/questions/74813631/display-all-anime-data-jikan-moe-api-v4

2条答案

按热度按时间

goqiplq21#

你必须使用循环并从获取API请求中删除&limit=1。然后你会得到你想要的结果。这里是完整的代码片段。

const API_URL = 'https://api.jikan.moe/v4';
      function getAnimeData() {
        const animeName = document.getElementById('anime-name').value;
        fetch(`${API_URL}/anime?q=${animeName}`)
          .then(response => response.json())
          .then(data => {
         data.data.forEach(item => {
      const anime = item;
      const imageUrl = item.images;
      const animeDataDiv = document.createElement('div');
      animeDataDiv.innerHTML = `
            <p></p>
              <img src ="${imageUrl.jpg.image_url}">
              <p><b>Title:</b> ${anime.title}</p>
              <p><b>Local Name:</b> ${anime.title_japanese} <p>
              <p><b>Synopsis:</b> ${anime.synopsis}</p>
              <p><b>Type:</b> ${anime.type}</p>
              <p><b>Total Episodes:</b> ${anime.episodes}</p>
            `;

      document.getElementById('anime-data').appendChild(animeDataDiv);
      })
    });
}

<html>
  <head>
    <title>Y</title>
  </head>
  <body>
    <h1>Anime</h1>
    <form>
      <label for="anime-name">Enter anime name:</label><br>
      <input autocomplete="off" type="text" placeholder="anime..." id="anime-name" name="anime-name"><br> <p></p>
      <button type="button" onclick="getAnimeData()">Submit</button>
    </form>
    <div id="anime-data"></div>
   
  </body>
</html>

祝您的JavaScript之旅好运。

赞(0）回复(0）举报 2022-12-16

rsl1atfo2#

你得用一个循环

const form = document.querySelector('form')
form.addEventListener('submit', getAnimeData)

const API_URL = 'https://api.jikan.moe/v4';

function getAnimeData(e) {
  e.preventDefault()
  const animeName = document.getElementById('anime-name').value;
  fetch(`${API_URL}/anime?q=${animeName}&limit=1`)
    .then(response => response.json())
    .then(data => {
      data.data.forEach(item => {
      const anime = item;
      const imageUrl = item.images;
      const animeDataDiv = document.createElement('div');
      animeDataDiv.innerHTML = `
            <p></p>
              <img src ="${imageUrl.jpg.image_url}">
              <p><b>Title:</b> ${anime.title}</p>
              <p><b>Local Name:</b> ${anime.title_japanese} <p>
              <p><b>Synopsis:</b> ${anime.synopsis}</p>
              <p><b>Type:</b> ${anime.type}</p>
              <p><b>Total Episodes:</b> ${anime.episodes}</p>
            `;

      document.getElementById('anime-data').appendChild(animeDataDiv);
      })
    });
}

<h1>Anime</h1>
<form >
  <label for="anime-name">Enter anime name:</label><br>
  <input autocomplete="off" type="text" placeholder="anime..." id="anime-name" name="anime-name"><br>
  <p></p>
  <button type="submit">Submit</button>
</form>
<div id="anime-data"></div>

赞(0）回复(0）举报 2022-12-16

我来回答

html 显示所有动画数据[Jikan.moe API v4] [已关闭]

2条答案

相关问题

热门标签

最新问答