Loading Multiple Models with Ember.RSVP and $.getJSON

1

I am trying to load multiple models with Ember $.getJSON. Initially i created the models objects successfully in separates routes but i need now to create them in the same route. I am using Github API

I came with the conclusion to use Ember.RSVP.hash and that’s how i try to achieve it

I am getting two JSON

    userurl = 'https://api.github.com/users/user';
    reposurl = 'https://api.github.com/users/user/repos';

I create the model objects for the repositories and the user git information to find them later in the store with Ember.RSVP.hash

Here the Route code ( sorry for the length :smiley: )

model: function(params) {
    var userurl, reposurl, self, git, repoListProxy, usersPromise, repositoriesPromise;
    self = this;
    git = this.store.createRecord('git',{});
    userurl = 'https://api.github.com/users/user';
    reposurl = 'https://api.github.com/users/user/repos';
    repoListProxy = Ember.ArrayProxy.create({
        content: []
    });
    usersPromise  = function(){
		return Ember.$.getJSON(userurl, function(data) {
	        var item = [];
	        git.setProperties({
	            name: data.name,
	            login: data.login,
	            location: data.location,
	            company: data.company,
	            followers: data.followers,
	            following: data.following
	        });
	    });
        item.pushObject(git);
        return resolve(item);
	};
	repositoriesPromise = function(){
        return Ember.$.getJSON(reposurl, function(repos) {
            if (repos.length) {
                repos.toArray().forEach(function(item, index, arr){
                    var repo;
                    repo = self.createReposList(item, repoListProxy);
                });
                repos = repoListProxy.get('content');
                return resolve(repos);
            }
        });
    };
    return Ember.RSVP.hash({
        git: this.store.find('git'),
        repo: this.store.find('repo')

    });
},

createReposList: function(repo, arr){
    var record
    record = this.store.createRecord('repo',{}),
    record.setProperties({
        name: repo.name,
        description: repo.description
    })
    arr.pushObject(record);
    return record;
},

Here my console log error

794×133 33.2 KB

I can not really understand where it is my error but assume that i am not using Ember.RSVP.hash as it should, or there is a better way to load these multiple models?

2

this.store.find(...) will fire request to find all records of that type. The firing is routed from store to adapter. An unconfigured adapter’s default behavior is to lookup record from the API endpoint that matches your route, which is index in this case. Then your non-existent API endpoint 404’d and you end up with an error.

3

Does someone can provide some examples with multiple models loaded with Ember.RSVP Ember.$.getJSON ? I am probably doing wrong sending the request to find the record in the store.

4

Koala,

Your mistake is how you think the store works. I also think they way you’re attempting to use the store is a bad idea. When using the store you shouldn’t be loading records yourself with getJSON.

Please read the following guide carefully:

In case you do know what you’re doing and it is intentional, please check this next guide:

I think peekRecord() or peekAll() have the behavior you desire.

5

Yes i think i understood better on how Ember.RSVP work for async calls, i can create record of my models successfully now but this is now my console problem

The value that #each loops over must be an Array. You passed {users: <ember-soundcloud@model:git::ember581:null>, repositories:

1190×79 25.6 KB 

var IndexRoute = Ember.Route.extend({
model: function() {
var store = this.get('store');


var userUrl = 'https://api.github.com/users/user';
var reposUrl = 'https://api.github.com/users/user/repos';

var usersPromise = function() {
    return Ember.$.ajax(userUrl).then(function(data) {
        return store.createRecord('git', {
            name: data.name,
            login: data.login,
            location: data.location,
            company: data.company,
            followers: data.followers,
            following: data.following
        })
    });
}

var repositoriesPromise = function() {
    return Ember.$.ajax(reposUrl).then(function(repos) {
        debugger
        return repos.map(function(repo) { // map returns new array no need to write container = [] . container.push(bla)
            return store.createRecord('repo', {
                name: repo.name,
                description: repo.description
            });
        })
    });
}

return Ember.RSVP.hash({
    users: usersPromise(),
    repositories: repositoriesPromise()
});

},

});

JSBIN: JS Bin - Collaborative JavaScript Debugging