mercredi 14 mars 2018

Assertion Failed: The key provided to set must be a string

I have a that passes an ID to the details.js route. This route findRecord my model passing the ID. The payload loads all the data, but when the page finishes loading it comes the error. I didn't find the "key" and i don't have a pokemon.detalhes controller.

Error: Assertion Failed: The key provided to set must be a string, you passed (generated pokemon.detalhes controller).

My Code: adapter.js

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

export default DS.RESTAdapter.extend({

    host: 'http://127.0.0.1:8000',
    namespace: 'api/v2',
    headers: computed(function () {
        return {
            'accept': 'application/json'
        };
    }),

    pathForType(type) {
        return type;
    },
/*
    query(store, b, query) {
        store.serializerFor('pokemon').set('pageSize', query.limit);
        const url = `${this.get('host')}/${this.get('namespace')}/pokemon`;
        console.log(url);
        return this.ajax(url, 'GET', {data: query});
    },
*/
    updateRecord(store, type, snapshot) {
        const data = snapshot.record.serialize();
        const headers = Object.assign({}, this.get('headers'), { "pokemon-edit": true });
        const url = this.buildURL(type.modelName, snapshot.id, snapshot, 'updateRecord');
        return this.ajax(url, 'PUT', { headers, data });
    }
});

serializer.js

import DS from 'ember-data';
import _ from 'lodash';

export default DS.RESTSerializer.extend({

normalizeResponse(store, primaryModelClass, payload) {
  debugger  
  return  {
        meta: {
          count: payload.count,
          previous: payload.previous,
          next: payload.next 
        },

        data: 
            payload.results && _.map(payload.results, item => {
              return {
                id: (/.+\/([0-9]+)\//.exec(item.url) || [])[1] || 0,
                type: 'pokemon',
                attributes: item
              }
            }) || {
                    type: 'pokemon',
                    id: payload.id,
                    attributes: Object.assign(payload) 
                  }
    };
  },
});

route/index.js

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

export default Route.extend({
    model(){
        return this.store.query('pokemon', {limit: 2});
    }
});

index.hbs

<table class="table table-striped">
    <thead class="thead-dark">
        <tr>
        <th scope="col">Id</th>
        <th scope="col">Pokemon</th>
        <th scope="col">Ações</th>
        </tr>
    </thead>
    <tbody>
        
            <tr>
                <th scope="row"></th>
                <td></td>
                <td><p class="btn btn-success">Detalhes</p></td>
            </tr>
        

    </tbody>
</table>

payload data from index route

{…}
count: 949
next: "http://127.0.0.1:8000/api/v2/pokemon/?limit=2&offset=2"
previous: null
results: […]
0: {…}
  name: "bulbasaur"
  url: "http://127.0.0.1:8000/api/v2/pokemon/1/"
1: {…}
  name: "ivysaur"
  url: "http://127.0.0.1:8000/api/v2/pokemon/2/"
length: 2

route/pokemon/details.js

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

export default Route.extend({
    model(params) {
        return { params };
    },

    setupController(controller, model) {
        this.store.findRecord('pokemon', model.params.id).then(response => {
            this.set(controller, 'model', response);
            return response;
        })
    }
});

pokemon/detail.hbs

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src= alt="Card image cap">
        <div class="card-body">
        <form>
            <div class="form-group">
                <span class="alert-primary">Pokemon:</span>
                <span class="form-control"></span>
            </div>
            <div class="form-group">
                <span class="alert-primary">XP Base:</span>
                <span class="form-control"></span>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>  
        </div>
</div>

model/pokemon.js

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

export default DS.Model.extend({

    name: DS.attr('string'),
    url: DS.attr(),
    height: DS.attr('number'),
    weight: DS.attr('number'),
    base_experience: DS.attr('number'),
    sprites: DS.attr(),

    image: computed('sprites', function(){
        const img = get('sprites');
        return img.get('sprites.front_default');
    })
});

payload data from details route with id=1

{…}
abilities: Array [ {…}, {…} ]
base_experience: 64
forms: Array [ {…} ]
game_indices: Array [ {…}, {…}, {…}, … ]
height: 7
held_items: Array []
id: 1
is_default: true
location_area_encounters: "/api/v2/pokemon/1/encounters"
moves: Array [ {…}, {…}, {…}, … ]
name: "bulbasaur"
order: 1
species: Object { url: "http://127.0.0.1:8000/api/v2/pokemon-species/1/", name: "bulbasaur" }
sprites: Object { back_default: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/1.png", back_shiny: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/1.png", front_default: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png", … }
stats: Array [ {…}, {…}, {…}, … ]
types: Array [ {…}, {…} ]
weight: 69




Aucun commentaire:

Enregistrer un commentaire