emberjs display an object return from an ajax call

Question

I have a small problem with my ember app, but I still don't know how to solve it..

I have this error :

Error while loading route: TypeError: Object #<Object> has no method 'addArrayObserver'

With this code :

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

{{#link-to 'enquiries' class="create-btn"}}Back to the enquiries{{/link-to}}
<div class="enquiry-info">
    <button {{action "update"}}>Update</button>

    <table>
        <tr>
            <td>{{enquiry.customerName}}</td>
        </tr>
        <tr>
            <td>{{customerEmail}}</td>
        </tr>
        <tr>
            <td>{{customerPhone}}</td>
        </tr>
    </table>

</div>
{{outlet}}
</script>

My controller :

App.EnquiriesController = Ember.ArrayController.extend({
    actions: {
        clickBtn: function( id ) {
            console.log('DEBUG: ClickBtn OK id = ' + id);
            this.transitionToRoute('enquiry', id);
        }
    }
});

Router :

App.EnquiryRoute = Ember.Route.extend({
    model: function( param ) {
        console.log('Enquiry id = ' + param.enquiry_id);
        return App.Enquiries.findOne(param.enquiry_id);
    }
});

To explain this better, I have a button, and when the user click on it, it trigger the clickBtn function. That return in my router the content of an ajax call from my server.

The thing is that is return me an object and it seems that ember prefer to have an array no ?

Is it possible to display an object in the template instead ?

Here is the ajax call :

findOne: function(id) {
        var result = {};
        $.ajax({
            url: host + 'mdf/enquiry/' + id,
            type: 'GET',
            accepts: 'application/json',
            success: function (data) {
                result = data;
            },
            error: function() {
                console.log('DEBUG: GET Enquiry ' + id + ' Failed');
            }
        });
        return result;
    }

Thanks for the help !! :)

[edit]

My router map :

App.Router.map(function() {
    this.resource('login', { path: '/' });
    this.resource('home');
    this.resource('enquiries', function (){
        this.route('create');
    });
    this.resource('enquiry', { path: '/:enquiry_id' }, function(){
            this.route('update');
        });
});

This is the object I've back from the server :

Object {ok: true, enquiry: Object}
enquiry: Object
-createdAt: "2014-02-03T15:32:16.000Z"
-customerEmail: "[email protected]"
-customerName: "Name Test"
-customerPhone: "01523456789"
-id: 1
-__proto__: Object
ok: true
__proto__: Object

Jake Haller-Roby · Accepted Answer · 2014-02-18 17:42:09Z

1

Ember has both ArrayControllers and ObjectControllers. It looks like you need to declare

App.EnquiriesController = Ember.ObjectController.extend({

insted of

App.EnquiriesController = Ember.ArrayController.extend({

EDIT: In response to your edit with more info, I see a couple of issues.

First, and most importantly: Your enquiry route is a serialized route. As a result, ember will handle the model for this route in a different way than it does other routes.

If you transition to this route by typing in the corresponding URL, the route will behave in a way that rightfully corresponds to your Ember.Route object/model hook. However. If you transition to this route via transitionToRoute('enquiry') or {{#linkTo 'enquiry'}}, it will not behave correctly. Your transitions and linkTos should be in format transitionToRoute('enquiry', modelObject) and {{#linkTo 'enquiry' modelObject}}, however, it seems you are passing an id rather than the returned of your ajax call.

So replace:

App.EnquiriesController = Ember.ArrayController.extend({
    actions: {
        clickBtn: function( id ) {
            console.log('DEBUG: ClickBtn OK id = ' + id);
            this.transitionToRoute('enquiry', id);
        }
    }
});

with

App.EnquiriesController = Ember.ArrayController.extend({
    actions: {
        clickBtn: function( id ) {
            console.log('DEBUG: ClickBtn OK id = ' + id);
            this.transitionToRoute('enquiry', App.Enquiries.findOne(id));
        }
    }
});

In addition, on your template, all of your handlebar helpers should be in the format {{enquiry.[propertyName]}} if you wish to access properties held within the enquiry object. You did this correctly for customerName but not for the other 2 properties.

EDIT #2, edit harder:

Additional issues are found.

There's a problem with your Ajax call. The object you return will always be an empty object. That's because ajax calls are asynchronous. You can not rely on an ajax call to run in the order you type it in.

Here's the order that your program is currently running in:

var result = {};
Ajax call is sent out.
return result;
Some time passes as we wait for a response....
Ajax call is returned.
result = data;... But we already returned an empty result in step 3!

Because your ajax call is fairly simple and you don't do any transformations on the returned data, I would suggest replacing your findOne function with:

findOne: function(id) {
    return $.ajax({
        url: host + 'mdf/enquiry/' + id,
        type: 'GET',
        accepts: 'application/json',
        success: function (data) {
            console.log('DEBUG: GET Enquiry ' + id + ' Succeeded');
            return data;
        },
        error: function() {
            console.log('DEBUG: GET Enquiry ' + id + ' Failed');
        }
    });
}

Additionally, in response to your comment about whether you should keep the model hook in your EnquiryRoute: Yes. If a person were to type in the URL associated with that route, then the model hook will trigger (because there will be no modelObject given). If you remove the model hook, the app will only work when clicking links within the app, and will cause errors if you enter the app from a url.

edited Feb 18, 2014 at 17:42

answered Feb 18, 2014 at 16:39

Jake Haller-Roby

6,4381 gold badge21 silver badges32 bronze badges

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

11 Comments

SuperMarco Over a year ago

edit Nevermind, I don't have the error. but nothing want to be displayed... :/

Jake Haller-Roby Over a year ago

This could be a number of different issues. Can you supply your Router Map and the object structure for the return of your ajax call? Also, please verify that your ajax call is running successfully (add a console.log to your findOne function to test)

SuperMarco Over a year ago

I've edited the main post.its running successfully, I've removed the console.log here to make to code easier to read. I receive the good information back.

Jake Haller-Roby Over a year ago

I see a couple of issues and am working on a response for you. But can you please show the full depth of the "enquiry" object? Or at least show how customerName/Email/Phone are stored in it, since those are the fields you are having trouble displaying?

SuperMarco Over a year ago

I understand what you mean, and thank you for that its making me understand ember a lot better ! I've done the modification you said but I still got nothing displayed.. I don't have any error either, but I have a question : Should I removed my model in my router ? And also when I console.log(App.Enquiries.findOne(param.enquiry_id)); my object is empty... but still in my request its goes as success ???

|

Collectives™ on Stack Overflow

emberjs display an object return from an ajax call

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related