Html Question posted in
Some basic documentation can be found here.

Display API response as a card in html

I am new to JavaScript and so I’m a bit confused here; I have an API response that looks like this:

{

      "title": "Bari Bari Densetsu",

      "id": "bari-bari-densetsu",

      "episode": "2",

      "episode_id": "bari-bari-densetsu-episode-2",

      "subOrdub": "SUB",

      "image_url": "https://gogocdn.net/cover/bari-bari-densetsu.png"
}

And I want it in the form of a card in html; how do I do it with JavaScript?

Tags:

2

Answers


  1. 0 
      const apiResponse = {
    "title": "Bari Bari Densetsu",
    "id": "bari-bari-densetsu",
    "episode": "2",
    "episode_id": "bari-bari-densetsu-episode-2",
    "subOrdub": "SUB",
    "image_url": "https://gogocdn.net/cover/bari-bari-densetsu.png"
  };

  const createCard = (data) => {
    const cardContainer = document.getElementById('cardContainer');
    const card = document.createElement('div');
    card.classList.add('card');

    card.innerHTML = `
      <h2>${data.title}</h2>
      <p>Episode: ${data.episode}</p>
      <p>Subtitle: ${data.subOrdub}</p>
      <img src="${data.image_url}" alt="${data.title}"/>
    `;

    cardContainer.appendChild(card);
  }

  createCard(apiResponse);
    .card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin: 10px;
  width: 300px;
}

 .card img {
   max-width: 100%;
   height: auto;
}
    <!DOCTYPE html>
<html>
<head>
  <title>Anime Episode Card</title>
</head>
<body>

<div id="cardContainer"></div>
    Login or Signup to reply.
  2. 0

    to display an API response as a card in HTML using JavaScript, you would typically fetch the API response, parse the JSON data, and then dynamically create HTML elements to display the data in the form of a card. Here is an example of how you could do it:

    // Suppose you have an API response stored in a variable
const apiResponse = {
  "title": "Bari Bari Densetsu",
  "id": "bari-bari-densetsu",
  "episode": "2",
  "episode_id": "bari-bari-densetsu-episode-2",
  "subOrDub": "SUB",
  "image_url": "https://gogocdn.net/cover/bari-bari-densetsu.png"
};

// Function to create a card element from the response
function createCardFromApiResponse(response) {
  const card = document.createElement('div');
  card.className = 'card';

  const image = document.createElement('img');
  image.src = response.image_url;
  image.alt = response.title;
  image.className = 'card-img-top';

  const cardBody = document.createElement('div');
  cardBody.className = 'card-body';

  const title = document.createElement('h5');
  title.className = 'card-title';
  title.textContent = response.title;

  const episode = document.createElement('p');
  episode.className = 'card-text';
  episode.textContent = 'Episode: ' + response.episode;

  cardBody.appendChild(title);
  cardBody.appendChild(episode);
  card.appendChild(image);
  card.appendChild(cardBody);

  document.body.appendChild(card); // Assuming you want to add the card to the body of your page
}

// Call the function with the API response
createCardFromApiResponse(apiResponse);

    this code assumes you are using bootstrap for styling since it uses bootstrap’s card classes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search