EmberJS users str.replace is not a function TypeError: str.replace is not a function

Question

So I'm just playing around with EmberJS and I really want to learn EmberJS, but I've gotten stuck on this issue. I'm doing a api call and I think I've formatted the json in the way the EmberJS RESTAdapter requires but I'm not totally sure.

My router:

App.Router.map( function() {

    this.route('about', { path: '/about' });
    this.route('users', { path: '/users' });
});

My Users route:

App.UsersRoute = Ember.Route.extend({
    model: function() {

        /*
        this.store.findAll('user').then( function( results ) {
            console.log( results );
        }, function() {
            console.log('failed');
        });
        */

        return this.store.findAll('user');
    }
});

My app.js

var App = Ember.Application.create();

App.ApplicationAdapter = DS.RESTAdapter.extend({
    host: 'http://api.diverseevolution.com'
});


App.ApplicationSerializer = DS.RESTSerializer.extend({
    primaryKey: 'id',
    serializeId: function( id ) {
        return id.toString();
    }
});

My template:

<script type="text/x-handlebars" data-template-name="users">
    <p>This is the users route, the goal is to plugin the users fixtures.</p>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>First name:</th>
                <th>Last name:</th>
            </tr>
        </thead>
        <tbody>
            {{#each model as |user|}}
            <tr>
                <td>{{ user.id }}</td>
                <td>{{ user.first_name }}</td>
                <td>{{ user.last_name }}</td>
            </tr>
            {{else}}
            <tr>
                <td colspan="3">No users found...</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>

My model:

App.User = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    email: DS.attr('string')
});

And finally my json response from the service:

{  
    "users":[  
        {  
            "id":"1",
            "firstName":"Thomas",
            "lastName":"Bird",
            "address":"4035 Stonebridge",
            "city":"Holly",
            "state":"MI",
            "zip":"48442",
            "email":"godoploid@gmail.com",
            "status":{  
                "id":"1",
                "title":"active",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            },
            "userTypeId":"1",
            "createdAt":"-0001-11-30 00:00:00",
            "updatedAt":"-0001-11-30 00:00:00",
            "deletedAt":null,
            "type":{  
                "id":"1",
                "title":"Admin",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            }
        },
        {  
            "id":"2",
            "firstName":"Avery",
            "lastName":"Crain",
            "address":"282 Mansfield Dr.",
            "city":"Lapeer",
            "state":"MI",
            "zip":"48446",
            "email":"avery.crain@gmail.com",
            "status":{  
                "id":"1",
                "title":"active",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            },
            "userTypeId":"2",
            "createdAt":"-0001-11-30 00:00:00",
            "updatedAt":"-0001-11-30 00:00:00",
            "deletedAt":null,
            "type":{  
                "id":"2",
                "title":"User",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            }
        },
        {  
            "id":"3",
            "firstName":"Mike",
            "lastName":"Marshall",
            "address":"4890 Lawndale St.",
            "city":"North Branch",
            "state":"MI",
            "zip":"48461",
            "email":"mjmarshall@gmail.com",
            "status":{  
                "id":"1",
                "title":"active",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            },
            "userTypeId":"2",
            "createdAt":"-0001-11-30 00:00:00",
            "updatedAt":"-0001-11-30 00:00:00",
            "deletedAt":null,
            "type":{  
                "id":"2",
                "title":"User",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            }
        },
        {  
            "id":"4",
            "firstName":"Kylar",
            "lastName":"Bird",
            "address":"5875 Gracelawn",
            "city":"North Branch",
            "state":"MI",
            "zip":"48461",
            "email":"kbird@gmail.com",
            "status":{  
                "id":"1",
                "title":"active",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            },
            "userTypeId":"2",
            "createdAt":"-0001-11-30 00:00:00",
            "updatedAt":"-0001-11-30 00:00:00",
            "deletedAt":null,
            "type":{  
                "id":"2",
                "title":"User",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            }
        }
    ]
}

The live api can be found here: http://api.diverseevolution.com/users

This is the error I'm getting:

I for the life of me can not figure out why I keep getting this error, I've changed the api to a number of formats described in the Ember docs, I've also changed the serializer, adapter and still can't figure out why I'm getting this error, if anyone could help I would greatly appreciate it. I'm really trying to wrap my head around EmberJS but I've been stuck here on this for the last two days!

Thanks

Answer 1

Looks like I can't reproduce your error and it seems to me if you:

• fix typos in template firstName instead of first_name
• remove ApplicationSerializer (there is nothing different from default)

your code will work.

Working jsbin on ember 2.1

Answer 2

It appears that EmberJS didn't like the multiple relationships I was sending back from the api.

{  
            "id":"3",
            "firstName":"Mike",
            "lastName":"Marshall",
            "address":"4890 Lawndale St.",
            "city":"North Branch",
            "state":"MI",
            "zip":"48461",
            "email":"mjmarshall@gmail.com",
            "status":{  
                "id":"1",
                "title":"active",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            },
            "userTypeId":"2",
            "createdAt":"-0001-11-30 00:00:00",
            "updatedAt":"-0001-11-30 00:00:00",
            "deletedAt":null,
            "type":{  
                "id":"2",
                "title":"User",
                "created_at":"-0001-11-30 00:00:00",
                "updated_at":"-0001-11-30 00:00:00",
                "deleted_at":null
            }
        }

Specifically the status and type once I got rid of those everything work. The response I have now looks like this and works perfectly:

{  
            "id":"1",
            "firstName":"Thomas",
            "lastName":"Bird",
            "address":"123 Somewhere Rd",
            "city":"Somewhere",
            "state":"MI",
            "zip":"98675",
            "email":"godoploid@gmail.com",
            "status":"1",
            "userTypeId":"1",
            "createdAt":"-0001-11-30 00:00:00",
            "updatedAt":"-0001-11-30 00:00:00",
            "deletedAt":null
        }