Сопоставление идентификаторов жанров с именами жанров в TMDb с JavaScript (Ember.js) - PullRequest
Новая
       13

Сопоставление идентификаторов жанров с именами жанров в TMDb с JavaScript (Ember.js)

0 голосов
/ 16 октября 2018

Я уверен, что многие из вас использовали API TMDb (База данных фильмов) для фильмов.Но у меня проблемы с отображением названий жанров для каждого показанного фильма.Я пытаюсь заменить каждое число в genre_ids, из фильмов api, на соответствующие им name из жанров api, так как показ чисел пользователям мало что говорит!Но я не получаю желаемого результата.Я не уверен, что правильный путь ...

Адаптер фильма 

import DS from 'ember-data';

const apiKey = 'SOME_API_KEY_HERE';

export default DS.RESTAdapter.extend({
  host: `https://api.themoviedb.org/`,
  namespace: '3',
  pathForType() {
    return `discover/movie?sort_by=popularity.desc&api_key=${apiKey}`;
  },
});

Адаптер жанра 

import DS from 'ember-data';

const apiKey = 'SOME_API_KEY_HERE';

export default DS.RESTAdapter.extend({
  host: `https://api.themoviedb.org/`,
  namespace: '3',
  pathForType() {
    return `genre/movie/list?api_key=${apiKey}`;
  },
});

Сериализатор фильма 

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = { movies: payload.results };
    return this._super(store, primaryModelClass, payload, id, requestType);
  }
});

Сериализатор жанра 

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = { genres: payload.genres };
    return this._super(...arguments);
  }
});

Модель фильма 

import DS from 'ember-data';

const { attr, hasMany } = DS;

export default DS.Model.extend({
  vote_count: attr('number'),
  video: attr('boolean'),
  vote_average: attr('number'),
  title: attr('string'),
  popularity: attr('number'),
  poster_path: attr('string'),
  original_language: attr('string'),
  original_title: attr('string'),
  genre_ids: attr(),
  backdrop_path: attr('string'),
  adult: attr('boolean'),
  overview: attr('string'),
  release_date: attr('date'),
});

Жанровая модель 

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
});

Маршрут 

import Route from '@ember/routing/route';
import RSVP from 'rsvp'

export default Route.extend({
  model() {
    return RSVP.hash({
      movies: this.store.findAll('movie'),
      genres: this.store.findAll('genre'),
    });
  },
});

Компонент списка фильмов 

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  movieGenreIds: computed('movies.@each.genre_ids', function() {
    return this.movies.map(movie => movie.genre_ids).reduce((a, b) => [...a, ...b]);
  }),

  genresNames: computed('movieGenreIds', 'genres', 'movies', function() {
    let names = [];

    this.genres.map((genre) => {
      this.movieGenreIds.forEach(movieGenreId => {

        if (parseInt(genre.id) === movieGenreId) {
          names.push(genre.name);
        }
      })
    })

    return names;
  }),
});

API фильмов (каждый фильм из массива results имеет такую ​​структуру): 

{
  "vote_count": 1092,
  "id":335983,
  "video": false,
  "vote_average": 6.7,
  "title": "Venom",
  "popularity": 505.173,
  "poster_path": "\/2uNW4WbgBXL25BAbXGLnLqX71Sw.jpg",
  "original_language": "en",
  "original_title": "Venom",
  "genre_ids": [27,878,28,53,35], // <-- I'm interested in this property
  "backdrop_path": "\/VuukZLgaCrho2Ar8Scl9HtV3yD.jpg",
  "adult": false,
  "overview": "When Eddie Brock acquires the powers of a symbiote, he will have to release his alter-ego “Venom” to save his life.",
  "release_date": "2018-10-03"
}

Жанры API 

"genres":[
  {"id":28,"name":"Action"},
  {"id":12,"name":"Adventure"},
  {"id":16,"name":"Animation"},
  {"id":35,"name":"Comedy"},
  ...
]

Шаблон Hbs (ожидаемый результат) 

<ul class="movie">
{{#each movies as |movie|}}
  <li>
    <h2 class="movie__title">{{movie.title}}</h2>
    <p class="movie__genre">
      genres: 
      {{#each genresNames as |genre|}}
        {{genre}} <!-- a list of genre names for this particular movie -->
      {{/each}}
    </p>
    <img src="https://image.tmdb.org/t/p/w500/{{movie.poster_path}}" alt="" class="movie__image">
  </li>
{{/each}}

1 Ответ

0 голосов
/ 16 октября 2018

Я думаю, что ваша основная проблема в том, что вы пытаетесь исправить что-то на уровне компонентов, что лучше обрабатывается на уровне модели.Хотя вы можете сделать это, на самом деле вам нужны отношения от модели movie к модели genre: 

genres: hasMany('genre'),

Я не уверен, что предоставляет ваш API1: 1, потому что вы не вставили точный ответ.В какой-то момент вы упомянули массив results, и жанры, кажется, заключены в массив genres.Так что, если это не на 100% правильно, вам, возможно, придется немного подправить это решение.

Для начала я бы порекомендовал более новый JSONSerializer вместо RESTSerializer.

Теперь вам нужносказать ember, что для отношения genres следует использовать идентификаторы, предоставленные в массиве genre_ids.Это можно сделать с помощью keyForRelationship: 

import DS from 'ember-data';
import {singularize} from 'ember-inflector';

export default DS.JSONSerializer.extend({
  ...
  keyForRelationship(key, typeClass, method) {
    return `${singularize(key)}_ids`;
  },
});

Здесь я использую ember-inflector для получения единственного числа имени отношения (так что genres -> genre), а затем просто добавьте _ids.Этого достаточно для того, чтобы ember распознал идентификаторы, а затем использовал их для предоставления правильных экземпляров модели.

Далее вы можете просто зациклить genres на вашей movie модели: 

{{#each movie.genres as |genre|}}
  {{genre.name}}
{{/each}}

Теперь вам даже не нужно передавать список всех жанров в контроллер / шаблон.Однако вам все равно нужно загрузить их, чтобы ember-data смог их использовать.В противном случае ember-data будет пытаться получить их по отдельности, когда вы их используете.

Так что ваш model хук может выглядеть так: 

model() {
  return RSVP.hash({
    genres: this.store.findAll('genre'),
    movies: this.store.findAll('movie'),
  }).then(x => x.movies);
}

Вот трюк, реализующий это.Однако, поскольку я не хотел получать данные в реальном времени, я создал фиктивные адаптеры, которые возвращают статические данные.

...