Getting Object #<Object> has no method 'map' in Ember

Question

I have a App.js like this,

App = Ember.Application.create();

App.Model = Ember.Object.extend({

});

App.IndexRoute = Ember.Route.extend({
    redirect : function() {
        this.transitionTo('users');
    }
});

App.UsersController = Ember.ObjectController.extend({

        filteredContent : function() {
            var searchText = this.get('searchText'), regex = new RegExp(searchText, 'i');

            return this.get('model').filter(function(item) {
                return regex.test(item.name);
            });
        }.property('searchText', 'model')

});

App.User = App.Model.extend({
    id : null,
    firstname : null,
    email : null
});

App.UsersRoute = Ember.Route.extend({
    model : function() {
        return App.User.findAll();
    }
});

App.UserRoute = Ember.Route.extend({
    model : function(params) {
      //var everyone = this.controllerFor('users');
      return App.User.findBy('id', params.user_id);
    }
});


App.User.reopenClass({
    findAll : function() {
        return $.getJSON("http://pioneerdev.us/users/index", function(data) {
            return data.map(function(row) {
                return App.User.create(row);
            });
        });
    }
});


App.Router.map(function() {
    this.resource('users', function() {
        this.resource('user',{path: '/:user_id'});
    });
});

HTML,

<script type="text/x-handlebars" data-template-name="users">

            {{input type="text" value=searchText}}

            {{#each item in filteredContent }}
            <tr><td>
              {{#link-to 'user' item}} <p>{{item.firstname}}</p>{{/link-to}}
            </td></tr>
            {{/each}}

            {{outlet}}
        </script>


     <script type="text/x-handlebars" data-template-name="user">
    <h2>
        {{email}}
   </h2>

    </script>

and I am getting a error like this on Chrome,

Uncaught TypeError: Object #<Object> has no method 'map'

and Firefox gives me, TypeError: data.map is not a function

Here's the Sample of JSON,

{"users":[{"id":"1","firstname":"Marilyn","lastname":"Hughes","address":"4 Johnson Alley","state":"Utah","country":"US","email":"[email protected]","phone":"6471228888","experience":"5","designation":"Writer"},{"id":"2","firstname":"John","lastname":"Porter","address":"86228 Commercial Court","state":"Pennsylvania","country":"US","email":"[email protected]","phone":"9018889877","experience":"3","designation":"Design"},{"id":"3","firstname":"Frances","lastname":"Johnson","address":"489 Summit Lane","state":"Minnesota","country":"US","email":"[email protected]","phone":null,"experience":"2","designation":"Script"}]}

What might be the issue? I am pretty sure it's an issue with .getJSON.

Should I use data.users.map instead of data.map? But when I use this, I get error on this line,

return this.get('model').filter(function(item) {

saying,

Uncaught TypeError: Object #<Object> has no method 'filter'

Marcio Junior · Accepted Answer · 2013-09-09 00:50:10Z

3

Yes you need to use data.users.map, because you are expectiong an array of elements, in the model property from controller.

The Uncaught TypeError: Object #<Object> has no method 'filter' error is because, this.get('model') have the data no data.users. So Object class don't have a method called filter, just Array. That data is returned from $.getJSON().then() method that resolve with the data:

$.getJSON().then(function(data) {
  // something like this is made by ember
  // controller.set('model', data);
});

And you need data.users as ember objects.

So I update your code to the following:

App.User.reopenClass({
    findAll : function() {
        return new Ember.RSVP.Promise(function(resolve, reject) {
            $.getJSON("http://pioneerdev.us/users/index", function(data) {
                var result = data.users.map(function(row) {
                    return App.User.create(row);
                });
                // here we resolve the array with ember objects
                // so you will have this.get('model') filled with array of users
                resolve(result);
            }).fail(reject);
        });
    }
});

It is a good idea to use the RSVP.Promise because this is the promises api used by ember.

This is the fiddle showing this working http://jsfiddle.net/marciojunior/HtJEh/

answered Sep 9, 2013 at 0:50

Marcio Junior

19.1k4 gold badges47 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Altar Over a year ago

Okay, Now I have a weird problem, the data is not displayed on HTML side :/

Marcio Junior Over a year ago

Hmm strange. Does the fiddle work for you? I dont understand your problem, can you describe more details?

John Altar Over a year ago

My bad, it was an error on HTML side. :) Thanks for the help! :D

Collectives™ on Stack Overflow

Getting Object #<Object> has no method 'map' in Ember

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related