Ember-Model: Help Debug - TypeError: cannot read property 'map' of undefined

Question

Summary

I am using Ember-Model and I need help debugging this error message.. it is actually two separate (but similar) error messages:

TypeError: Cannot read property 'map' of undefined

-and-

Uncaught Error: Assertion Failed: TypeError: Cannot read property 'map' of undefined

Details

In my app, there is a route called "view". It pulls a collection of accounts from an API.

I have the model and custom adapter defined almost correctly and I get a successful response from the server with a JSON payload. I do not know what to do next as there is an error in the console (see above).

Somewhere in the Ember-Model source code there is a property called map inside of the materializeData function, and do not know what it is trying to do... (I see a comment in that function // FIXME which is making me nervous)

Here is my code that got me to the problem:

View Model:

import ViewAdapter from '../../adapters/accounts/view';

var attr = Ember.attr, hasMany = Ember.hasMany, belongsTo = Ember.belongsTo;

var View = Ember.Model.extend({
    debtor_id:                    attr(),
    debtor_legacy_account_number: attr(),
    debtor_full_name:             attr(),
    debtor_balance:               attr()
});

View.adapter = ViewAdapter.create();
View.url =        'api/rest/debtor/list';
View.rootKey =    'data';
View.collectionKey =  'debtors';
View.primaryKey = 'debtor_id';

export default View;

View Adapter:

var ViewAdapter = Ember.RESTAdapter.extend({
    buildURL: function(klass, id) {
        var urlRoot = Ember.get(klass, 'url');
        if (!urlRoot) { throw new Error('ViewAdapter requires a `url` property to be specified'); }
        if (!Ember.isEmpty(id)) {
            return urlRoot + "/" + id;
        } else {
            return urlRoot;
        }
    },
    ajaxSettings: function(url, method) {
        return {
            url: url,
            type: method,
            headers: {
                "Accept": "application/json; version=1.0.0"
            },
            dataType: "json"
        };
    }
});

export default ViewAdapter;

View Route:

import View from '../../models/accounts/view';

export default Ember.Route.extend({
    model: function() {
        return View.find({page_size: 10, page_number: 1});
    }
});

Note: my use of the model hook here to pass parameters to the server is temporary, I am searching a better way to do server-side pagination in a separate case... but this at least works for now...

What am I missing?

Full Stack Trace

TypeError: Cannot read property 'map' of undefined
    at Ember.RecordArray.Ember.ArrayProxy.extend.materializeData (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:60646:24)
    at Ember.RecordArray.Ember.ArrayProxy.extend.load (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:60630:31)
    at Ember.RESTAdapter.Ember.Adapter.extend.didFindQuery (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61925:15)
    at http://local-03-02-xx.lariatcentral.net/assets/vendor.js:61916:12
    at invokeCallback (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23709:19)
    at publish (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23379:9)
    at publishFulfillment (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:23799:7)
    at http://local-03-02-xx.lariatcentral.net/assets/vendor.js:29217:9
    at DeferredActionQueues.invoke (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:21747:18)
    at Object.DeferredActionQueues.flush (http://local-03-02-xx.lariatcentral.net/assets/vendor.js:21797:15) vendor.js:17062
logToConsole vendor.js:17062
RSVP.onerrorDefault vendor.js:59834
__exports__.default.trigger vendor.js:22673
Promise._onerror vendor.js:23397
publishRejection vendor.js:23804
(anonymous function) vendor.js:29217
DeferredActionQueues.invoke vendor.js:21747
DeferredActionQueues.flush vendor.js:21797
Backburner.end vendor.js:21260
Backburner.run vendor.js:21315
apply vendor.js:21145
run vendor.js:19777
settings.success vendor.js:62014
fire vendor.js:3214
self.fireWith vendor.js:3326
done vendor.js:9370
callback

JSON Payload Sample

{
  "status":"success",
  "data":{
    "debtors":[
      {
        "debtor_id":1048,
        // ...
        // ...
      },
      {
        "debtor_id":1049,
        // ...
        // ...
      },
      {
        "debtor_id":1050,
        // ...
        // ...
      },
      // ...more JSON...
    ],
    "count":10,
    "total":475,
    "current_page":1,
    "total_pages":48,
    "page_size":10
  }
}

I also found this github issue that looks exactly like my problem.

If you're still wondering what map does, you can find more info here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Colin Nichols
@ColinNichols thanks for the reference.. at least i know now what it is supposed to do... now just gotta figure out why it isn't doing it :p — Grapho
what does the data look like coming back from your server? Also, what is the full stacktrace? — Colin Nichols

Marcio Junior Marcio Junior · Accepted Answer · 2014-08-07T17:03:13

When you call View.find({page_size: 10, page_number: 1}); ember-model will send a request to the server, get the payload and call the didFindQuery hook. Since you're using the RESTAdapter the current implemantation is the following:

didFindQuery: function(klass, records, params, data) {
  var collectionKey = Ember.get(klass, 'collectionKey'),
    dataToLoad = collectionKey ? data[collectionKey] : data;

  records.load(klass, dataToLoad);
},

The fourth param data is your payload. And because you setup the View.collectionKey to 'debtors' it will call records.load with data['debtors'] which returns undefined. That undefined value is passed to materializeData and you're receiving the TypeError: Cannot read property 'map' of undefined. What you need is data['data']['debtors'].

What you can do is:

Change your payload structure to:

{
  "status":"success",
  "debtors":[
      {
        "debtor_id":1048,
        // ...
        // ...
      },
      {
        "debtor_id":1049,
        // ...
        // ...
      },
      {
        "debtor_id":1050,
        // ...
        // ...
      },
      // ...more JSON...
    ],
    "count":10,
    "total":475,
    "current_page":1,
    "total_pages":48,
    "page_size":10
  }
}

Or override the didFindQuery and didFindAll to:

var ViewAdapter = Ember.RESTAdapter.extend({
    // others methods ...
    didFindQuery: function(klass, records, params, data) {
      var collectionKey = Ember.get(klass, 'collectionKey'),
        dataToLoad = collectionKey ? data['data'][collectionKey] : data;

      records.load(klass, dataToLoad);
    },
    didFindAll: function(klass, records, data) {
      var collectionKey = Ember.get(klass, 'collectionKey'),
        dataToLoad = collectionKey ? data['data'][collectionKey] : data;

      records.load(klass, dataToLoad);
    }
})

I hope it helps

Ember-Model: Help Debug - TypeError: cannot read property 'map' of undefined

Summary

Details

1 Answers