У меня есть метод JS, запрашивающий данные у https://swapi.co/documentation#films для возврата списка фильмов через HTML-страницу.
Я хочу написать метод JS, который будет возвращать данные для одного фильма (getSingleFilm) с учетом атрибута «episode_id» из данных фильма.
Код, который у меня сейчас есть,
(function(){
var dataChangedEvent = new Event('dataChanged')
function SW() {
this.url = 'https://swapi.co/api/films/'
this.films = []
}
/* get data from the API endpoint and store it locally */
SW.prototype.getData = function() {
var self = this
$.get({
url: self.url,
success: function(data) {
/* store data as a property of this object */
self.films = data
/* trigger the data changed event */
window.dispatchEvent(dataChangedEvent)
}
})
}
/* return the list of films */
SW.prototype.getFilms = function() {
if (this.films === []) {
return []
} else {
return this.films.results
}
}
/*--
NEW METHOD HERE!
Return a single film based off of the episode_id
--*/
SW.prototype.getSingleFilm = function(episodeID) {
if (this.films === []) {
return []
} else {
this.films.results.episode_id = episodeID
/*--I'm having trouble continuing here--*/
}
}
/* export to the global window object */
window.app = window.app || {}
window.app.SW = SW
})()
И я возвращаю его через другой файл JS
(function(){
$(document).ready(function() {
/* make a model instance and trigger data load */
window.app.model = new window.app.SW()
window.app.model.getData()
/* set up handler for dataChanged event from model */
$(window).on("dataChanged", function() {
var films = window.app.model.getFilms()
var film = window.app.model.getSingleFilm(4)
for(var i=0; i<films.length; i++) {
$("#movies").append("<li>Episode " + films[i].episode_id + " : " + films[i].title + " (" + films[i].director + ")" + " - " + films[i].release_date+ "</li>")
}
/*--Trying to return a new list with a single film here--*/
$("#single_film").append("<li>Episode " + film.episode_id + "</li>")
})
})
})()
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Star Wars!</title>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<ul id="movies"></ul>
<ul id="single_film"></ul>
<!-- Scripts -->
<!-- load javascript libraries -->
<script src="static/js/jquery-3.3.1.min.js"></script>
<script src="static/js/model.js"></script>
<script src="static/js/index.js"></script>
</body>
</html>
Я не совсем уверен, как продолжить этот метод, я продолжаю блокироваться.
Помощь приветствуется