0
Since I thank you for the space, I have the following problem with graphql, I followed the commands by a site of public api, the Anilist https://anilist.gitbook.io/anilist-apiv2-docs/overview/graphql/getting-started, I can get a lot of information, but what I wanted I’m not getting, I would like to get the characters of an anime, if someone can help me would be very grateful, I am very lay in the subject, I will leave the code here insert the
var query = `
{Media (id: 1, type: ANIME) {
id
title {
romaji
english
native
}
episodes
type
averageScore
seasonYear
episodes
duration
characters {
nodes {
image {
large
medium
}
}
}
coverImage {
extraLarge
}
}
}
`;
var url = 'https://graphql.anilist.co',
options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({
query: query,
})
};
fetch(url, options).then(handleResponse)
.then(handleData)
.catch(handleError);
function handleResponse(response) {
return response.json().then(function (json) {
return response.ok ? json : Promise.reject(json);
});
}
function handleData(data) {
//console.log(data.data.Media.title.userPreferred);
//document.getElementById("anime").innerHTML = data.data.Media.title.userPreferred;
document.getElementById("title").innerHTML = data.data.Media.title.english;
document.getElementById("type").innerHTML = data.data.Media.type;
document.getElementById("episodes").innerHTML = data.data.Media.episodes;
document.getElementById("averageScore").innerHTML = data.data.Media.averageScore;
document.getElementById("duration").innerHTML = data.data.Media.duration;
document.getElementById("episodeList").innerHTML = data.data.Media.episodes;
document.getElementById("dateanime").innerHTML = data.data.Media.seasonYear;
document.getElementById("anime_image").setAttribute("src", data.data.Media.coverImage.extraLarge );
document.getElementById("anime_person").setAttribute("src", data.data.Media.characters.image.large );
}
function handleError(error) {
alert('Error, check console');
console.error(error);
}#main, .autofill {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 15px;
position: absolute;
z-index: 1;
top: -5px;
font-size: 10px;
text-shadow: 1px 1px 1px #0000007d;
line-height: 2.9rem
}
strong, span{
font-size: 2rem;
color:#000
}<!DOCTYPE html>
<div id="content" class="cards">
<div class="autofill">
<strong>Nome: </strong><span id="title"></span>
<br />
<strong>Tipo: </strong> <span id="type"></span><br />
<strong>N. Episódios: </strong> <span id="episodes"></span><br />
<strong>Score: </strong> <span id="averageScore"></span><br />
<strong>Duração: </strong> <span id="duration"></span> <br />
<strong>Status: </strong> <span id="episodeList"> </span> <br />
<strong>Inicio: </strong> <span id="dateanime"></span><br />
<span>
<img src="" id="anime_image"> <br />
<img src="" id="anime_person"> <br />
</span>
</div>
</div>
</div>
<style type="text/css">
html,h1,h2, a{
font-family: Roboto Condensed;
font-size: 1.2em;
text-align: center;
color: #fff
}
img{
width: 30%;
}
.card{
background: rgb(47 44 56);
width: 40%;
height: 278px;
float: right;
margin: 10px;
}
</style>
</body>
</html>bold text code here