EmberJS 从 RESTful api 解析数据

Question

我是 Ember 的新手，我每天都在学习和学习。作为一个挑战，我很难从 RESTful API pokeapi.co 获取数据 我想获取结果的名称和网址https://pokeapi.co/api/v2/pokemon/ 然后将ID作为参数传递并获取https://pokeapi.co/api/v2/pokemon/1/ /2 /3等中的所有数据。

我卡住了，请帮帮我.... 我的代码：

适配器/pokemon.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
    host:'https://pokeapi.co',
    namespace: 'api/v2',

    pathForType(){
        return 'pokemon';
    }
});

模型/pokemon.js

import DS from 'ember-data';

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

路由/pokemon.js

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

export default Route.extend({
    model(){
        return this.store.findAll('pokemon')
//    setupController(controller, model){
//    controller.set('pokemons',model);
    }
});

序列化器/pokemon.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({

    normalizeResponse(store, primaryModelClass, payload, id, requestType){
        payload = {
            pokemon: payload
        },
        console.log(payload);
        return this._super(store, primaryModelClass, payload, id, requestType);
   }
});

模板/pokemon.hbs

{{#each model as |pokemon|}}
      <div class="md-list-item-text">
         <h3>#{{pokemon.id}}: {{pokemon.name}}</h3>
        </div>
{{/each}}

控制台：

{…}
pokemon: {…}
count: 949
next: "https://pokeapi.co/api/v2/pokemon/?limit=20&offset=20"
previous: null
results: […]
0: {…}
name: "bulbasaur"
url: "https://pokeapi.co/api/v2/pokemon/1/"
__proto__: Object { … }
1: {…}
name: "ivysaur"
url: "https://pokeapi.co/api/v2/pokemon/2/"
__proto__: Object { … }
2: {…}
name: "venusaur"
url: "https://pokeapi.co/api/v2/pokemon/3/"
__proto__: Object { … }
3: {…}
name: "charmander"
url: "https://pokeapi.co/api/v2/pokemon/4/"
__proto__: Object { … }
4: {…}
name: "charmeleon"
url: "https://pokeapi.co/api/v2/pokemon/5/"
__proto__: Object { … }
5: {…}
name: "charizard"
url: "https://pokeapi.co/api/v2/pokemon/6/"
__proto__: Object { … }
6: {…}
name: "squirtle"
url: "https://pokeapi.co/api/v2/pokemon/7/"
__proto__: Object { … }
7: {…}
name: "wartortle"
url: "https://pokeapi.co/api/v2/pokemon/8/"
__proto__: Object { … }
8: {…}
name: "blastoise"
url: "https://pokeapi.co/api/v2/pokemon/9/"
__proto__: Object { … }
9: {…}
name: "caterpie"
url: "https://pokeapi.co/api/v2/pokemon/10/"
__proto__: Object { … }
10: {…}
name: "metapod"
url: "https://pokeapi.co/api/v2/pokemon/11/"
__proto__: Object { … }
11: {…}
name: "butterfree"
url: "https://pokeapi.co/api/v2/pokemon/12/"
__proto__: Object { … }
12: {…}
name: "weedle"
url: "https://pokeapi.co/api/v2/pokemon/13/"
__proto__: Object { … }
13: {…}
name: "kakuna"
url: "https://pokeapi.co/api/v2/pokemon/14/"
__proto__: Object { … }
14: {…}
name: "beedrill"
url: "https://pokeapi.co/api/v2/pokemon/15/"
__proto__: Object { … }
15: {…}
name: "pidgey"
url: "https://pokeapi.co/api/v2/pokemon/16/"
__proto__: Object { … }
16: {…}
name: "pidgeotto"
url: "https://pokeapi.co/api/v2/pokemon/17/"
__proto__: Object { … }
17: {…}
name: "pidgeot"
url: "https://pokeapi.co/api/v2/pokemon/18/"
__proto__: Object { … }
18: {…}
name: "rattata"
url: "https://pokeapi.co/api/v2/pokemon/19/"
__proto__: Object { … }
19: {…}
name: "raticate"
url: "https://pokeapi.co/api/v2/pokemon/20/"
__proto__: Object { … }
length: 20
Error while processing route: pokemon Assertion Failed: You must include an 'id' for pokemon in an object passed to 'push'

Answer 1

我遵循了警长发布的twiddle 并重新编写了所有代码。 现在它正在工作:)

// 应用程序/适配器/monster.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host:'https://pokeapi.co',
  namespace: 'api/v2',

  pathForType() {
    return 'pokemon';
  },
});

// app/models/monster.js

import DS from 'ember-data';
import { computed } from '@ember/object';

export default DS.Model.extend({
  number: computed('url', function() {
    var fullUrl = this.get('url');
    return fullUrl.split('/')[6];
  }),
  name: DS.attr(),
  url: DS.attr(),
});

// app/routes/monster/monster-detail.js

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

export default Route.extend({
  model(params) { 
    var monster = this.store.findRecord('monster', params.number);
    console.info('incomming monster', monster);
    return monster;
  }
});

// app/serializers/monster.js

import DS from 'ember-data';

export default DS.RESTSerializer.extend({
  primaryKey: 'url', 

  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
    payload = {
      monster: payload.results,
    }
    console.log(payload);
    return this._super(store, primaryModelClass, payload, id, requestType);
  }
});

{{!-- app/templates/monsters/monster-list.hbs --}}

<h2>/pokemon-list</h2>

<ul class='monster-list'>
  {{#each model as |monster|}}
    <li>
      #:{{monster.number}} Pokemon:{{monster.name}} - 
     </li>
  {{/each}}
</ul>