CODEWITHSUNDEEP
ember.js
SoSimple
SoSimple

Reputation: 701

Delete action not working

I'm trying to learn ember.js by following Getting Started with Ember.js Using Ember CLI. The tutorial shows you how to build a todo list but I'm having trouble getting the delete action to work. Since I'm new to ember, I'm not 100% sure what code you guys will need to see but the delete button is in app/templates/components/todo-item.hbs:

{{#if editing}}
    {{input class="edit" value=todo.title action="submitTodo"}}
{{else}}
    {{input type="checkbox" checked=todo.complete class="toggle"}}
    <label class="{{if todo.complete 'completed'}}" {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label>
    <button class="destroy" {{action "deleteTodo"}}></button>
{{/if}}

I have a delete action in app/components/todo-item.js like so:

  actions: {
    editTodo() {**code**},
    submitTodo() {**code**},
    deleteTodo() {
      let todo = this.get('todo');
      this.sendAction('deleteTodo', todo);
    }
  }

And in app/routes/todos.js I have:

actions: {
    createTodo(newTitle) {**code**},
    updateTodo(todo) {
        todo.save();
    },
    deleteTodo(todo) {
        todo.destroyRecord();
    }
}

When I click on the delete button nothing happens and the following shows up in Ember Inspector console:

Successful request: DELETE /todos/2

Object (with a lot of stuff nested under it)

Error: Assertion Failed: normalizeResponse must return a valid JSON API document: * One or more of the following keys must be present: "data", "errors", "meta".

I'm not really sure what that error means so if anyone could explain and offer a possible solution I'd really appreciate it.

github repo

Upvotes: 3

Views: 620

Answers (2)

Eugene
Eugene

Reputation: 11

You need to change this: this.del('/todos/:id') to 

this.del('/todos/:id', function(db, request) {
        var id = request.params.id;
        return {
            data: {
                type: 'todos',
                id: id,
                attributs: db.todos.find(id)
            }
        };
    });

Upvotes: 1

LukeC
LukeC

Reputation: 111

It is saying that the response from the server when sending the delete request is not as expected. Ember is expecting your back end to conform to the JSON API spec which is outlined here. This means it is expecting a response that has a JSON object with either "data", "error" or "meta" at base level. In this case, to keep Ember happy, I'd suggest you'd want to be returning an object that looks like this:

 {data: {}}

This is effectively just confirming to Ember that the object is deleted.

Upvotes: 0

Related Questions