Creating new Sighting 500 error

Frontend Web Development: The Big Nerd Ranch Guide Chapter 24: Controllers
1

Hey there, hopefully someone can help me out.

Got stuck on creating new sighting with several errors.

  1. First one “this.get() is not a function” appears as soon as I enter /sightings/new

  2. After entering info and pressing button to create new sighting I get an 500 error.
    After digging deeper, it seems that there is a problem with my request, payload looks like this:
    {"data":{"attributes":{"location":"twst","created-at":null,"sighted-at":null},"type":"sightings"}}
    If we check it in Ember (Chrome plugin) it looks like id is null, and dates are null

  3. For some reason, I can’t see Cryptids and I am choosing a blank (guess the payload error and this one might be connected)

55
Screenshot 2019-07-27 at 09.17.55.png2878×1610 524 KB
48
Screenshot 2019-07-27 at 09.21.48.png2878×1610 487 KB

All the code here: https://github.com/mmihailicenko/tracker/tree/chapter-24
Would love to get some help/suggestions!

2

Ok, the 3rd issue (blank cryptid list) is solved
in templates/sightings/new.hbs
{{#x-option value=cryptid}}{{cryptid-name}}{{/x-option}}
should be
{{#x-option value=cryptid}}{{cryptid.name}}{{/x-option}}
a dot instead of a hyphen in cryptid name

3

1st issue (this.get(…) is not a function)
can be fixed changing x-option to xs.option (Install EmberX-Select p.437 can be checked here) if you are using ^3.0.0 x-select that is

4

Internal Server Error 500 is still reproducing

Who can check this?
This is my request via app:
{"data":{"attributes":{"location":"twst","created-at":null,"sighted-at":null},"type":"sightings"}}
response: 500 internal server error

Trying to reproduce via postman.
Request:
{ "data": [ { "id": "279968", "type": "sightings", "attributes": { "created-at": "2019-05-30T21:52:18.948Z", "sighted-at": "2019-07-30", "location": "TEST" } } ] }

response:
{ "errors": [ { "title": "Internal Server Error", "detail": "Internal Server Error", "code": "500", "status": "500" } ] }

5

I think the problem is caused by x-select. After version 3.0.0, x-select has some problems assigning the value in template directly to the model. Maybe you can try what tgandee said, use action instead of value to assign the value: Install EmberX-Select p.437, just like this:

// new.hbs
{{#x-select on-change=(action 'didMakeCryptidSelection')
            class="form-control" as |xs|}}
    {{#xs.option disabled=true}}Select Cryptid{{/xs.option}}
    {{#each model.cryptids as |cryptid|}}
        {{#xs.option value=cryptid}}{{cryptid.name}}{{/xs.option}}
    {{/each}}
{{/x-select}}

// controllers/sightings/new.js
actions: {
    didMakeCryptidSelection(value) {
        this.get('sighting').set('cryptid', value);
    }
}

If you still have any problem, maybe you can have a look at what I did.
And sorry for my poor English; English is not my native language:-)

2 Likes