/* I wanted to pratice using different APIs and parsing through the json . This one is for the starwars API. It does a search of characters, planets, films of starwars universe. Very cool. Author is me, Paul Caron, nice to meet you! */ var images = { "Luke Skywalker":"https://upload.wikimedia.org/wikipedia/en/thumb/9/9b/Luke_Skywalker.png/220px-Luke_Skywalker.png", "C-3PO":"https://upload.wikimedia.org/wikipedia/en/thumb/5/5c/C-3PO_droid.png/220px-C-3PO_droid.png ", "R2-D2":"https://upload.wikimedia.org/wikipedia/en/thumb/3/39/R2-D2_Droid.png/220px-R2-D2_Droid.png ", "Darth Vader":" https://upload.wikimedia.org/wikipedia/en/thumb/7/76/Darth_Vader.jpg/220px-Darth_Vader.jpg ", "Leia Organa":" https://upload.wikimedia.org/wikipedia/en/thumb/1/1b/Princess_Leia%27s_characteristic_hairstyle.jpg/220px-Princess_Leia%27s_characteristic_hairstyle.jpg", "Owen Lars" :"https://vignette.wikia.nocookie.net/lego/images/9/92/75059_1to1_001.jpg/revision/latest/scale-to-width-down/340?cb=20140308181013 ", "Beru Whitesun lars":" https://vignette.wikia.nocookie.net/starwars/images/d/df/Beru.jpg/revision/latest/scale-to-width-down/340?cb=20061016060944", "Biggs Darklighter":" https://vignette.wikia.nocookie.net/starwars/images/0/00/BiggsHS-ANH.png/revision/latest?cb=20130305010406", "Obi-Wan Kenobi":" https://vignette.wikia.nocookie.net/starwars/images/4/4e/ObiWanHS-SWE.jpg/revision/latest?cb=20111115052816", }; var spanId=0; var searchType="people/"; function search(url="https://swapi.co/api/"+searchType+"?search="+document.getElementById("character").value){ //spanId=0; ; var jsonObj; fetch(url) .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); } function searchCharacter(jsonObj){ // spanId=0; var answer = document.getElementById("answer"); answer.innerHTML = ""; for(r in jsonObj.results){ answer.innerHTML += "
"; for(j in jsonObj.results[r]){ if(!isNaN(jsonObj.results[r][j])){ answer.innerHTML += j+":"; answer.innerHTML += jsonObj.results[r][j];} else if(jsonObj.results[r][j].includes("http")){ answer.innerHTML += j+":"; fetchName(jsonObj.results[r][j],spanId); spanId++; }else if(Array.isArray( jsonObj.results[r][j] )){answer.innerHTML += j; for(let a=0;a"; fetchName(jsonObj.results[r][j][a],spanId); spanId++; } }else{ answer.innerHTML += j+":"; answer.innerHTML += jsonObj.results[r][j];} answer.innerHTML += "
"; } answer.innerHTML += "

"; } if(jsonObj.next!=null){ document.getElementById("next").onclick = function(){fetchUrl(jsonObj.next)}; } if(jsonObj.previous!=null){ document.getElementById("previous").onclick = function(){fetchUrl(jsonObj.previous)}; } } function fetchUrl(url){ fetch(url) .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); } function fetchName(url,id){ fetch(url) .then(res => res.json()).then(json=>{ var jsonObj=json; var span= document.getElementById(id); span.innerHTML += jsonObj.name||jsonObj.title; span.onclick= function(){ // search(url); fetch(url).then(res => res.json()).then(json=>{ jsonObj = json; fetchOne(jsonObj ); });}}) } function fetchOne(jsonObj){ let image = document.getElementById("im"); if(images[jsonObj.name]){ image.src = images[jsonObj.name]; }else{ image.src = ""; } answer.innerHTML ="
"; for(key in jsonObj){ if(!isNaN(jsonObj[key])){ answer.innerHTML += key+":"; answer.innerHTML += jsonObj[key];} else if(jsonObj[key].includes("http")){ answer.innerHTML += key+":"; fetchName(jsonObj[key],spanId); spanId++; }else if(Array.isArray( jsonObj[key] )){answer.innerHTML += key; for(let a=0;a"; fetchName(jsonObj[key][a],spanId); spanId++; } }else{ answer.innerHTML += key+":"; answer.innerHTML += jsonObj[key];} answer.innerHTML += "
"; } answer.innerHTML +="
"; } function allCharacters(){ searchType = "people/"; document.getElementById("character").placeholder="character name"; fetch("https://swapi.co/api/people/") .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); } function allSpecies(){ searchType = "species/"; document.getElementById("character").placeholder="species name"; fetch("https://swapi.co/api/species/") .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); } function allFilms(){ searchType = "films/"; document.getElementById("character").placeholder="film name"; fetch("https://swapi.co/api/films/") .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); } function allPlanets(){ searchType = "planets/"; document.getElementById("character").placeholder="planet name"; fetch("https://swapi.co/api/planets/") .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); } function allVehicles(){ searchType = "vehicles/"; document.getElementById("character").placeholder="vehicle name"; fetch("https://swapi.co/api/vehicles/") .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); } function allStarships(){ searchType = "starships/"; document.getElementById("character").placeholder="starship name"; fetch("https://swapi.co/api/starships/") .then(res => res.json()).then(json=>{ jsonObj=json; searchCharacter( jsonObj ); }); }

Star Wars API