使用JavaScript（Ember.js）将TMDb中的流派ID与流派名称匹配

我相信你们中的很多人都在电影中使用了TMDb（电影数据库）api。但是我在显示每部电影的类型名称时遇到了问题。我试图用电影api中的

流派ID

中的每个数字替换流派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 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 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 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 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（来自

结果

数组的每部电影都具有此结构）：

哈佛商学院模板（预期结果）

{{{每部电影都是{电影}

{{movie.title}

体裁：
{{{#每个流派重新命名为|流派}
{{体裁}
{{/每个}}


{{/每个}}

---

我认为您的主要问题是，您试图在组件层上修复一些在模型层上处理得更好的东西。 虽然您可以这样做，但实际上您需要的是从

电影

模型到

流派

模型的关系：

genres: hasMany('genre'),

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

我不确定您的API提供了什么1:1，因为您没有粘贴准确的响应。您曾经提到过一个

结果

数组，而类型似乎被包装在

类型

数组中。所以，如果这不是100%正确，你可能需要调整一下这个解决方案

首先，我建议使用较新的

JSONSerializer

，而不是

RESTSerializer

现在您需要告诉ember，对于

genres

关系，它应该使用

genre\u id

数组中提供的id。这可以通过以下方式实现：

在这里，我使用获取关系名称的单数（因此

genres->genre

），然后只添加

\u id

。这足以让ember识别ID，然后使用它们来提供正确的模型实例

接下来，您可以在

电影

模型上循环播放

类型

：

genres: hasMany('genre'),

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

现在，您甚至不需要将所有类型的列表传递给控制器/模板。但是，您仍然需要加载它们，以便

余烬数据

可以使用它们。否则，

ember data

将在使用它们时尝试单独获取它们

因此，您的

模型

挂钩可能如下所示：

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

---

。但是，由于我不想实时获取数据，我创建了虚拟适配器，用于返回静态数据。

我认为您的主要问题是，您试图在组件层上修复一些在模型层上处理得更好的东西。 虽然您可以这样做，但实际上您需要的是从

电影

模型到

流派

模型的关系：

genres: hasMany('genre'),

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

我不确定您的API提供了什么1:1，因为您没有粘贴准确的响应。您曾经提到过一个

结果

数组，而类型似乎被包装在

类型

数组中。所以，如果这不是100%正确，你可能需要调整一下这个解决方案

首先，我建议使用较新的

JSONSerializer

，而不是

RESTSerializer

现在您需要告诉ember，对于

genres

关系，它应该使用

genre\u id

数组中提供的id。这可以通过以下方式实现：

在这里，我使用获取关系名称的单数（因此

genres->genre

），然后只添加

\u id

。这足以让ember识别ID，然后使用它们来提供正确的模型实例

接下来，您可以在

电影

模型上循环播放

类型

：

genres: hasMany('genre'),

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

现在，您甚至不需要将所有类型的列表传递给控制器/模板。但是，您仍然需要加载它们，以便

余烬数据

可以使用它们。否则，

ember data

将在使用它们时尝试单独获取它们

因此，您的

模型

挂钩可能如下所示：

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

---

。但是，因为我不想实时获取数据，我创建了虚拟适配器，用于返回静态数据。

是否要使用流派名称添加到每个电影对象属性？现在还不清楚您想要实现什么（而且似乎没有必要为此构建阵列

movieGenreId

）@barbsan，谢谢您的回复！基本上，我想将

类型ID

数组中的数字替换为相应的“名称”，以便在浏览器中显示它们。因为显示数字并不能说明什么！也许，试试这个：当然，但我问的是预期结果的结构，而不是你们为什么要这样做。我看到你创建的所有类型的数组没有关于movie ant的信息，然后你尝试创建与第一个数组id匹配的类型名称数组（同样没有movie id）。事情是，我已经尝试了很多方法，所以上面的

Ember

代码只是我最后一次尝试，我知道这是不正确的。这就是为什么我要寻找一种我还没有想到的新方法。你打算用流派名称添加到每个电影对象属性中吗？现在还不清楚您想要实现什么（而且似乎没有必要为此构建阵列

movieGenreId

）@barbsan，谢谢您的回复！基本上，我想将

类型ID

数组中的数字替换为相应的“名称”，以便在浏览器中显示它们。因为显示数字并不能说明什么！也许，试试这个：当然，但我问的是预期结果的结构，而不是你们为什么要这样做。就我所见，你正在创建一个