index.html being loaded as one of my data models

Question

I am using Ember-CLI with Ember 2.2.0 and Ember Data 2.0. This problem was happening before I upgraded my ember-cli to the latest ember.

I have a fairly simple Ember app. There is a 'users' file on my server hard coded for testing with some json of some sample user accounts. https://example.com/users

{"users": [{"id":1,"firstName":"Peter","lastName":"blah","email":"[email protected]","password":"blah","phone":"212-555-1212","isActive":"true"},{"id":2,"firstName":"George","lastName":"blah","email":"[email protected]","password":"blah","phone":"310-555-1212","isActive":"true"}]}

On my development machine I have a generated Ember-cli app with the following modifications:

router.js
...
Router.map(function() {
  this.route('users', function() {});
});

...

users.hbs
<h1>Users Route</h1>

<h1>Users Index</h1>
<Table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
</tr>

{{#each users as |user|}}
<tr>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
</tr>
{{/each}}

</table>
{{outlet}}

in my routes folder:

user.js
export default Ember.Route.extend({
    model: function() {
        return this.store.findAll('user');
    }
});

Ember throws the following parsing error when it tries to access the users model:

Error while processing route: users.index Unexpected token < SyntaxError: Unexpected token <

I can clearly see in the ember inspector that it is trying to parse my index.html page!! WTH??

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>UserMan</title>
....

Even if I go to the ember inspector, and go to the users route, then try and access the model using the store:

$E.store.findAll('user')

The parsing error happens and its clearly trying to parse the index.html page again.

Any ideas where ember is going wrong? Or what I am doing wrong?

Do you see an ajax request being made to users ? Do you have an adapter (JSONAPIAdapter, ou RESTAdapter?) — Pedro Rio
@PedroRio I'm using a RESTAdapter. My bad for not mentioning that in my original post. — Peter S
And do you see an ajax request being made to the usersendpoint? what does the request look like, what does the response look like? Also, you mention that your route is users but your route file (in your code says user.js (singular) while the other files are users.* — Pedro Rio
Sorry for the late response due to the holidays. I started a new project but getting same error. Yes an Ajax call is being made. Here are the headers: (Request URL:localhost:4200/users Request Method:GET Status Code:304 Not Modified Remote Address:[::1]:4200) and (cf-ray:2607e5c1249239ca-PHX connection:close date:Wed, 06 Jan 2016 13:51:24 GMT etag:"126-527627451f578" server:cloudflare-nginx set-cookie:__cfduid=dc615eecd5c2528619c200693563db7b41452088284; expires=Thu, 05-Jan-17 13:51:24 GMT; path=/; domain=.example.com; HttpOnly X-Powered-By:Express Request Headers view source ) — Peter S
Here is a portion of my response: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>UserMan2</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> — Peter S

Peter S Peter S · Accepted Answer · 2016-01-07T05:44:26

Ok I got it working. Here are the steps that I had to take: 1) turn off the proxy setting in Ember Server (this just doesn't appear to work) 2) Change the users file in Apache2 configuration file to ForceType application/json 3) Enable CORS by Header Access-Control-Allow-Origin "*" 4) use the host: http://example.com in the RESTAdapter

index.html being loaded as one of my data models

1 Answers