Marvel API - GET personages
De interactieve documentatie is een goede plek om van te vertrekken. We beginnen met alle Marvel personages op te halen en tonen ze in een tabel.
Stappen
Uit het voorbeeld van de interactieve documentatie halen we de url op:
https://gateway.marvel.com:443/v1/public/characters?apikey=5e50ffa08294f9673a4876bb8738ab43
We willen 100 (dat is het maximum aantal) items ophalen:
https://gateway.marvel.com:443/v1/public/characters?limit=100&apikey=5e50ffa08294f9673a4876bb8738ab43
Of alle personnages die beginnen met een s:
https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=s&apikey=5e50ffa08294f9673a4876bb8738ab43
Een daarvan stoppen we in onze ajax call:
var loadMarvelCharacters = function(that) {
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else {
// code for older browsers
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
var me = this;
// callback functie
ajax.onreadystatechange = function() {
// server sent response and
// OK 200 The request was fulfilled.
if (ajax.readyState == 4 && ajax.status == 200) {
// we maken een tabel element
showMarvelCharacters(this.responseText);
}
};
ajax.open("GET", "https://gateway.marvel.com:443/v1/public/characters?limit=100&apikey=5e50ffa08294f9673a4876bb8738ab43", true);
ajax.send();
}
En we verwerken het json antwoord van de Marvel server. We analyseren eerst de geretourneerde json string. We beperken ons tot twee personages, de lijst is al lang genoeg. We zijn alleen geïnteresseerd in de results verzameling. En daarvan gaan we de naam en de thumbnail tonen in een tabel. Hier volgt een gedeelte van de response. Voor de volledige response probeer je het eerste voorbeeld uit van de Interactieve Documentatie.
{
"code": 200,
"status": "Ok",
"copyright": "© 2016 MARVEL",
"attributionText": "Data provided by Marvel. © 2016 MARVEL",
"attributionHTML": "<a href=\"http://marvel.com\">Data provided by Marvel. © 2016 MARVEL</a>",
"etag": "a4f30ded56374e52b9a2c91528df8428cf0b2b05",
"data": {
"offset": 0,
"limit": 1,
"total": 1485,
"count": 1,
"results": [
{
"id": 1011334,
"name": "3-D Man",
"description": "",
"modified": "2014-04-29T14:18:17-0400",
"thumbnail": {
"path": "http://i.annihil.us/u/prod/marvel/i/mg/c/e0/535fecbbb9784",
"extension": "jpg"
},
"resourceURI": "http://gateway.marvel.com/v1/public/characters/1011334",
"comics": {
"available": 11,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/comics",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21366",
"name": "Avengers: The Initiative (2007) #14"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/24571",
"name": "Avengers: The Initiative (2007) #14 (SPOTLIGHT VARIANT)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21546",
"name": "Avengers: The Initiative (2007) #15"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21741",
"name": "Avengers: The Initiative (2007) #16"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/21975",
"name": "Avengers: The Initiative (2007) #17"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/22299",
"name": "Avengers: The Initiative (2007) #18"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/22300",
"name": "Avengers: The Initiative (2007) #18 (ZOMBIE VARIANT)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/22506",
"name": "Avengers: The Initiative (2007) #19"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/10223",
"name": "Marvel Premiere (1972) #35"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/10224",
"name": "Marvel Premiere (1972) #36"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/10225",
"name": "Marvel Premiere (1972) #37"
}
],
"returned": 11
},
"series": {
"available": 2,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/series",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/1945",
"name": "Avengers: The Initiative (2007 - 2010)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/2045",
"name": "Marvel Premiere (1972 - 1981)"
}
],
"returned": 2
},
"stories": {
"available": 17,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/stories",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19947",
"name": "Cover #19947",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19948",
"name": "The 3-D Man!",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19949",
"name": "Cover #19949",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19950",
"name": "The Devil's Music!",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19951",
"name": "Cover #19951",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/19952",
"name": "Code-Name: The Cold Warrior!",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47185",
"name": "Avengers: The Initiative (2007) #14 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47499",
"name": "Avengers: The Initiative (2007) #15 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47792",
"name": "Avengers: The Initiative (2007) #16",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/47793",
"name": "Avengers: The Initiative (2007) #16 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/48362",
"name": "Avengers: The Initiative (2007) #17 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49104",
"name": "Avengers: The Initiative (2007) #18 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49106",
"name": "Avengers: The Initiative (2007) #18, Zombie Variant - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49888",
"name": "Avengers: The Initiative (2007) #19",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/49889",
"name": "Avengers: The Initiative (2007) #19 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/54371",
"name": "Avengers: The Initiative (2007) #14, Spotlight Variant - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/96303",
"name": "Deadpool (1997) #44",
"type": "interiorStory"
}
],
"returned": 17
},
"events": {
"available": 1,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011334/events",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/events/269",
"name": "Secret Invasion"
}
],
"returned": 1
},
"urls": [
{
"type": "detail",
"url": "http://marvel.com/characters/74/3-d_man?utm_campaign=apiRef&utm_source=5e50ffa08294f9673a4876bb8738ab43"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/3-D_Man_(Chandler)?utm_campaign=apiRef&utm_source=5e50ffa08294f9673a4876bb8738ab43"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1011334/3-d_man?utm_campaign=apiRef&utm_source=5e50ffa08294f9673a4876bb8738ab43"
}
]
}
]
}
}
Hier volgt de methode waarmee we de namen in een tabel tonen:
function showMarvelCharacters(response) {
// convert JSON to array
// we zijn alleen geïnteresseerd in de personnages
var characters = JSON.parse(response).data.results;
var table = document.createElement('table');
characters.map(function(character) {
var row = document.createElement('tr');
var name = document.createElement('td');
var textContent = document.createTextNode(character.name);
name.appendChild(textContent);
row.appendChild(name);
table.appendChild(row);
});
document.body.appendChild(table);
}
Oefening
Toon de thumbnail op 150px hoog in een tweede kolom naast de naam.
In de geretourneerde result set, staat een thumbnail object met daarin een path en een extension sleutel. Dat kunnen we toekennen aan het src attribuut van een img element.
Ga naar de How-Tos -> Images:
Kopiëer de gewenste grootte en voeg die toe aan het path naar de afbeelding in de JavaScript code:
De code:
function getMarvelCharacters() {
var ajax;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
} else {
// code for older browsers
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
// callback functie
ajax.onreadystatechange = function() {
// server sent response and
// OK 200 The request was fulfilled.
if (this.readyState == 4 && this.status == 200) {
createHTML(this.responseText);
}
};
ajax.open("GET", "https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=spider& apikey=5e50ffa08294f9673a4876bb8738ab43", true);
ajax.send();
}
function createHTML(response) {
// document.getElementById("demo").innerHTML =
// response;
var characters = JSON.parse(response).data;
// alert(JSON.stringify(characters.results[0]));
for (let i = 0; i <= characters.count-5; i++) {
let figureElem = document.createElement('FIGURE');
let image = document.createElement('IMG');
image.src = characters.results[i].thumbnail.path + '/standard_fantastic.' + characters.results[i].thumbnail.extension;
figureElem.appendChild(image);
document.querySelector('article').appendChild(figureElem)
}
}
getMarvelCharacters();
2020-02-19 12:44:35