Display all anime data [Jikan.moe API v4]-CodePudding

I am trying to display name, synopsis, type and total episodes of all the anime from the api. But I do not know how to do so.

for e.g. when I fetch https://api.jikan.moe/v4/anime?q=Bocchi The Rock&sfw I want to display the data of all the anime i.e. Bocchi The Rock, Show by Rock!! yet it only shows the 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>

I am new to JavaScript so I actually have no idea what to do

CodePudding user response：

You have to use loop and remove the &limit=1 from fetch api request. then you will get the result as you want. here is the full code snippet.

 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>

Good Luck with your JavaScript Journey.

CodePudding user response：

You have to use a loop

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>