emberjs - processing data returned from ajax call

Question

I'm sure this is very simple but ...

I have an ember route which uses an Ajax call to retrieve an array of data. I want to create an array of model objects from that array.

When I try to create instances of the model in question I get an error

Cannot read property '_attributes' of null TypeError: Cannot read property '_attributes' of null

To try to define what the issue was I created a couple of model instances independently of the data being returned from the Ajax call, for instance :

var testPccB = ParentCostCentre.create({cceClientCode : "ABC" });

And the error occurs there as well.

The entire route code looks like this :

import Ember from 'ember';
import ParentCostCentre from "../models/parentcostcentre";

export default Ember.Route.extend({

    model() {
        return Ember.RSVP.hash({

            costcentres: this.store.findAll('costcentre'),

            parentcostcentres: this.testFindParents(),

        })
    },

    testFindParents: function () {
        var result = [];
        return new Ember.RSVP.Promise(function (resolve, reject) {

            const theDrvId = 888;
            const theClientCode = 'ABC';
            const theCceIdentifier = 'XYZXY'; 

            console.log("About to create testPccA");
            //this works
            var testPccA = ParentCostCentre.create();
            console.log("Finished create testPccA");
            console.log("About to create testPccB");
            //this generates the error
            var testPccB = ParentCostCentre.create({cceClientCode : "ABC" });
            console.log("Finished create testPccB");

            var theUrl = "api/parentcostcentres/" + theDrvId + "/" + theClientCode + "/" + theCceIdentifier ;

            Ember.$.ajax({
                type: 'GET',
                url: theUrl,
                success: function (data) {
                    data.forEach(function (item) {
                        result.push(ParentCostCentre.create(item));
                    });
                    resolve(result);
                },
                error: function (request, textStatus, error) {
                    console.log(error);
                    reject(error);
                }
            });
        });
    },     

    setupController(controller, model) {
            controller.set('costcentres', model.costcentres);
            controller.set('parentcostcentres', model.parentcostcentres);
    }
});

Is there something I'm failing to do here which would allow this to work ?

EDIT 1:

This is what the parentcostcentre model looks like :

import DS from 'ember-data';

export default DS.Model.extend({
  cceClientCode: DS.attr('string'),
  cceIdentifier: DS.attr('string'),
  cciActiveFrom: DS.attr('date'),
  cciActiveTo: DS.attr('date'),
  cciAutoid: DS.attr('number'),
  cciCcGeoLevel: DS.attr('number'),
  cciCceId: DS.attr('number'),
  cciDescription: DS.attr('string'),
  cciPraId: DS.attr('number'),
  cciMatEmpId: DS.attr('number'),
  cciIsDisabled: DS.attr('number'),
  cciPostsummFlag: DS.attr('string'),
  cciTdEmpId: DS.attr('number'),
  emiActiveToPra: DS.attr('date'),
  emiActiveToTd: DS.attr('date'),
  emiEmailAddressPra: DS.attr('string'),
  emiEmailAddressTd: DS.attr('string'),
  emiNameFamilyPra: DS.attr('string'),
  emiNameFamilyTd: DS.attr('string'),
  emiNameFirstPra: DS.attr('string'),
  emiNameFirstTd: DS.attr('string')
});

EDIT 2 For what it's worth the data returned by the API call is shown below. I'm not sure how relevant that is given that even this processing ...

var testPccB = ParentCostCentre.create({cceClientCode : "ABC" });

... generates the error but I include it for completeness.

[
  {
    "id": 5101,
    "cceClientCode": "ABC",
    "cceIdentifier": "XYZXY",
    "cciAutoid": 81415,
    "cciCceId": 5111,
    "cciActiveFrom": "2017-03-27T11:47:23",
    "cciActiveTo": "2300-01-01T00:00:00",
    "cciGeoId": 888,
    "cciIsDisabled": 0,
    "cciPraEmpId": 40336,
    "cciTdEmpId": 14694,
    "cciDescription": "South Bigtown",
    "cciPostsummFlag": "S",
    "cciCcFinancialLevel": 1,
    "emiNameFirstPra": "Phil",
    "emiNameFamilyPra": "Franklin",
    "emiActiveToPra": "2300-01-01T00:00:00",
    "emiEmailAddressPra": "[email protected]",
    "emiNameFirstTd": "Phillipa",
    "emiNameFamilyTd": "Howard",
    "emiActiveToTd": "2300-01-01T00:00:00",
    "emiEmailAddressTd": "[email protected]"
  }
]

So the error occurs when creating a ParentCostCentre instance. Therefore it may be helpful to post your models/parentcostcentre.js. — Enno
– Enno, Commented Mar 12, 2018 at 10:03
@Enno - thanks for you response. I'm just about to edit the question to include that. — shearichard
– shearichard, Commented Mar 12, 2018 at 19:21

shearichard · Accepted Answer · 2018-03-12 20:48:51Z

OK I found the answer to this.

I simply passed the response from the Ajax straight back rather than trying to build an array out of it. So the testFindParents code now looks like this :

testFindParents: function () {
    var result = [];
    return new Ember.RSVP.Promise(function (resolve, reject) {

        const theDrvId = 888;
        const theClientCode = 'ABC';
        const theCceIdentifier = 'XYZXY'; 


        var theUrl = "api/parentcostcentres/" + theDrvId + "/" + theClientCode + "/" + theCceIdentifier ;

        Ember.$.ajax({
            type: 'GET',
            url: theUrl,
            success: function (data) {
                resolve(data);
            },
            error: function (request, textStatus, error) {
                console.log(error);
                reject(error);
            }
        });
    });
},

Of course that doesn't explain why I can't instantiate an instance of parentcostcentre as I was trying to in the test code but the primary problem at least is resolved.

Collectives™ on Stack Overflow

emberjs - processing data returned from ajax call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related