CODEWITHSUNDEEP
modelember.js
atwright147
atwright147

Reputation: 3811

Ember.js AJAX Model

I am a CodeIgniter dev and I am trying to learn ember.js.

I have been trying to get a model together which will make an AJAX call to a server, pull in a XML file, parse the data and return it.

The following is my model code:

App.Statement = Ember.Object.extend();
App.Statement.reopenClass({
    all: function() {
        var transactions = {};
        // FROM: http://jquerybyexample.blogspot.com/2012/04/read-and-process-xml-using-jquery-ajax.html
        $.ajax({
            type: "GET",
            url: "http://www.example.com/transactions.xml",
            dataType: "xml",
            success: function(xml){
                $(xml).find('transaction').each(function(i,v){
                    transactions[i].id      = $(this).attr('id');
                    transactions[i].vendor  = $(this).find('vendor').text();
                    transactions[i].date    = $(this).find('date').text();
                    transactions[i].spent   = $(this).find('spent').text();
                });
            },
            error: function() {
                console.log("An error occurred while processing XML file.");
            }
        });
        return transactions;
    }
});

The following is the content of my XML file (transactions.xml):

<?xml version="1.0" encoding="UTF-8" ?>
<statement>
    <transaction id="123456">
        <vendor>WH Smiths</vendor>
        <date>2013-05-01</date>
        <spent>10.00</spent>
    </transaction>
    <transaction id="123457">
        <vendor>Gap</vendor>
        <date>2013-05-02</date>
        <spent>39.99</spent>
    </transaction>
    <transaction id="123458">
        <vendor>DSG PLC</vendor>
        <date>2013-05-03</date>
        <spent>1024.99</spent>
    </transaction>
    <transaction id="123459">
        <vendor>Tesco</vendor>
        <date>2013-05-06</date>
        <spent>23.35</spent>
    </transaction>
</statement>

When I use the console to try to access the transactions object it remains undefined can anyone point me in the right direction?

UPDATE:

Okay, so based on the replys so far my model now looks like this:

var transaction = Ember.ArrayProxy.create({content: []});

App.Statement = DS.Model.extend({
    all: function() {
        var transactions = {};
        // FROM: http://jquerybyexample.blogspot.com/2012/04/read-and-process-xml-using-jquery-ajax.html
        $.ajax({
            type: "GET",
            url: "http://www.atwright.co.uk/cof/statement.xml",
            dataType: "xml",
            success: function(xml){
                var obj = Ember.Object.create({id:null, vendor:null, date:null, spent:null});
                obj.setProperties({
                    id: $(this).attr('id'), 
                    vendor: $(this).find('vendor').text(), 
                    date: $(this).find('date').text(), 
                    spent: $(this).find('spent').text()
                });
                transaction.pushObject(obj);
            },
            error: function() {
                console.log("An error occurred while processing XML file.");
            }
        });
        return transactions;
    }
});

How do I access any of the data? I can see that transaction has many Ember related properties but no data within it (though I could be doing it wrong).

Upvotes: 0

Views: 2539

Answers (3)

Luke Melia
Luke Melia

Reputation: 8389

$.ajax call is asynchronous, so when the method returns, it is returning transactions as an empty object. That may be what you are seeing in the console.

In addition most Ember apps that retrieve a collection of records return them as an array. This is useful because an ArrayController can easily observe the contents of the array for rendering purposes.

Upvotes: 0

intuitivepixel
intuitivepixel

Reputation: 23322

I guess the problem (besides the async peculiarities) with var transactions = {}; is that you are just creating a plain javascript object, which has no Ember support whatsoever, by Ember support I mean that you can bind to etc.

Try to declare you transaction variable like this:

var transaction = Ember.ArrayProxy.create({content: []});

And then inside your success function where you iterate over the results (code not testet):

...
var obj = Ember.Object.create({id:null, vendor:null, date:null, spent:null});
obj.setProperties({
  id: $(this).attr('id'), 
  vendor: $(this).find('vendor').text(), 
  date: $(this).find('date').text(), 
  spent: $(this).find('spent').text()
});
transaction.pushObject(obj);
...

Hope it helps

Upvotes: 2

Todd A. Jacobs
Todd A. Jacobs

Reputation: 84353

You don't have a model here, because you're extending Ember.Object instead of DS.Model. Instead, you probably want something like:

App.Statement = DS.Model.extend({
    // Ajax stuff goes here.
});

See the Defining Models guide for more information. You may also want to look at Creating Custom Transformations rather than performing the transformations directly in your XHR request.

Upvotes: -1

Related Questions