Data Star Wars

README.md

Filter Data Star Wars dari Dua API

Sumber API

• API untuk data starwars: https://swapi.dev/
• API untuk tokoh starwars dengan foto-fotonya: https://github.com/akabab/starwars-api
• API untuk film starwars dari swapi dengan poster fotonya: http://www.omdbapi.com/?apikey=API_KEY&t=star-wars-jedi

Teknis

Melakukan Filter data Starwars dari OMDB API sesuai dengan data dari omdb API dan swapi API.

Data dari omdb

const result = {"Search":[{"Title":"Star Wars: Episode IV - A New Hope","Year":"1977","imdbID":"tt0076759","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode V - The Empire Strikes Back","Year":"1980","imdbID":"tt0080684","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00NjZmLTg5NGItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VI - Return of the Jedi","Year":"1983","imdbID":"tt0086190","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00Y2IzLTk1NTMtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VII - The Force Awakens","Year":"2015","imdbID":"tt2488496","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SX300.jpg"},{"Title":"Star Wars: Episode I - The Phantom Menace","Year":"1999","imdbID":"tt0120915","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYTRhNjcwNWQtMGJmMi00NmQyLWE2YzItODVmMTdjNWI0ZDA2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode III - Revenge of the Sith","Year":"2005","imdbID":"tt0121766","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNTc4MTc3NTQ5OF5BMl5BanBnXkFtZTcwOTg0NjI4NA@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode II - Attack of the Clones","Year":"2002","imdbID":"tt0121765","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMDAzM2M0Y2UtZjRmZi00MzVlLTg4MjEtOTE3NzU5ZDVlMTU5XkEyXkFqcGdeQXVyNDUyOTg3Njg@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VIII - The Last Jedi","Year":"2017","imdbID":"tt2527336","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjQ1MzcxNjg4N15BMl5BanBnXkFtZTgwNzgwMjY4MzI@._V1_SX300.jpg"},{"Title":"Rogue One: A Star Wars Story","Year":"2016","imdbID":"tt3748528","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjEwMzMxODIzOV5BMl5BanBnXkFtZTgwNzg3OTAzMDI@._V1_SX300.jpg"},{"Title":"Star Wars: Episode IX - The Rise of Skywalker","Year":"2019","imdbID":"tt2527338","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMDljNTQ5ODItZmQwMy00M2ExLTljOTQtZTVjNGE2NTg0NGIxXkEyXkFqcGdeQXVyODkzNTgxMDg@._V1_SX300.jpg"}],"totalResults":"616","Response":"True"}

Di filter menjadi:

const swapiMovies = result.Search

Ambil judul sesuai swapi api:

const title = swapiMovies[0].Title.toLowerCase().split(" - ")[1]

Data films dari swapi api:

const res = fetch("swapi") //async loh ini
const data = swapiData.results

Filter data film dari omdb dengan data dari swapi:

const dataPoster = swapiMovies.filter(movie1 => data.some(movie2 => movie2.title.toLowerCase() === movie1.Title.toLowerCase().split(" - ")[1]))

Tambahkan link poster ke data swapi & ganti Title di swapi sesuai title dari omdb supaya lebih lengkap:

let filmWithImg = data.map(movie => {
    let swapiMovie = movie.title.toLowerCase()
    const moviePoster  = dataPoster.find(omdb => omdb.Title.toLowerCase().split(' - ')[1] === swapiMovie)
    movie.poster = moviePoster.Poster
    movie.title  = moviePoster.Title
    return movie 
})

Sort data Film berdasarkan Nomor Episode:

function compare(a, b) {
  // Use toUpperCase() to ignore character casing
  const bandA = a.episode_id;
  const bandB = b.episode_id;
  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

const sorted = filmWithImg.sort(compare)