EmberJS parsing data from RESTful api

Question

I'm new to Ember and I keep studying and learning every day. And as a challenge, I'm having great difficulty getting data from the RESTful API pokeapi.co I want to get the names and url of the results https://pokeapi.co/api/v2/pokemon/ to then pass the ID as a parameter and get all data in https://pokeapi.co/api/v2/pokemon/1/ /2 /3 etc.

I'm stuck, please help me.... My Code:

adapter/pokemon.js

import DS from 'ember-data';

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

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

model/pokemon.js

import DS from 'ember-data';

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

routes/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);
    }
});

serializer/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);
   }
});

templates/pokemon.hbs

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

Console:

{…}
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

I followed the twiddle that the sheriffderek posted and re-worked all the code. Now it's working :)

// app/adapters/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>