CODEWITHSUNDEEP
javascriptjsonember.jsember-data
user3116234
user3116234

Reputation: 13

ember-data hasMany relationship using json

I am trying to use ember-data hasMany relationship, so that my authors link can reproduce all authors and when you click on a specific author the page also provides links to his books. When clicking on a specific book it provides links to its authors. It worked perfectly well with fixtures but something went wrong with ajax calls. I would really appreciate your help here.

my app.js:

App = Ember.Application.create({});


App.Store = DS.Store.extend({
  adapter: DS.RESTAdapter.extend()
});

App.Author = DS.Model.extend({
  name: DS.attr('string'),
  biography: DS.attr('string'),
  book_ids: DS.hasMany('book', { async: true })
});

App.Book = DS.Model.extend({
  name: DS.attr('string'),
  description: DS.attr('string'),
  image: DS.attr('string'),
  author_ids: DS.hasMany('author', { async: true })
});




App.Router.map(function() {
  this.resource('about');
  this.resource('books', function() {
    this.resource('book', { path: '/:book_id' });
  });
  this.resource('authors', function() {
    this.resource('author', { path: '/:author_id' });
  });
});

App.BooksRoute = Ember.Route.extend({
  model: function() {
  return App.Book.findAll();
 }
});

App.Book = Ember.Object.extend();

App.Book.reopenClass({
  findAll: function() {
  return $.getJSON('/json/books.json').then(function(response) {

    var books=[];

    response.book.forEach( function (book) {
      books.push( App.Book.create(book) );
    });
     return books; 
  });
 }
});

App.AuthorsRoute = Ember.Route.extend({
   model: function() {
   return App.Author.findAll();
 }
 });

App.Author = Ember.Object.extend();

App.Author.reopenClass({
  findAll: function() {
  return $.getJSON('/json/authors.json').then(function(response) {

            var authors=[];

      response.author.forEach( function (author) {
      authors.push( App.Author.create(author) );
    });
     return authors;
  });
 }
});

the data in json is represented like this: 

{
  "author": [
  {
    "id": 1,
    "name": "James Joyce",
    "biography": "<p><b>James Joyce</b> <small>(February 2, 1882 - January 13, 1941)</small> was one of the most preeminent Irish authors of the twentieth century. He is known for his literary innovation such as a strictly focused narrative and indirect style. Although not strictly originally, James Joyce brought the aforementioned writing methods were to an unparalleled height.</p>",    
    "book_ids": ["1", "2"]
  },
  {
    "id": 2,
    "name": "F. Scott Fitzgerald",
    "biography": "<p><b>Francis Scott Key Fitzgerald</b> <small>(September 24, 1896 – December 21, 1940)</small> was an American author of novels and short stories, whose works are the paradigmatic writings of the Jazz Age, a term he coined. He is widely regarded as one of the greatest American writers of the 20th century. Fitzgerald is considered a member of the 'Lost Generation' of the 1920s. He finished four novels: This Side of Paradise, The Beautiful and Damned, The Great Gatsby (his most famous), and Tender Is the Night. A fifth, unfinished novel, The Love of the Last Tycoon, was published posthumously. Fitzgerald also wrote many short stories that treat themes of youth and promise along with age and despair.</p>",
    "book_ids": ["3", "4"]
   }
  ]
}

Upvotes: 1

Views: 1334

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

You're writing over the model definitions and then not using the store for fetching the records. I've simplified your code a bit for example in the jsbin.

App.BooksRoute = Ember.Route.extend({
  model: function() {
   return this.store.find('book');
 }
});


App.AuthorsRoute = Ember.Route.extend({
   model: function() {
     return this.store.find('author');
   }
 });

App.ApplicationAdapter= DS.RESTAdapter.extend({
  host:'json',
  pathForType: function(type) {
    return Ember.String.pluralize(type) + '.json';
  }
});

http://emberjs.jsbin.com/OxIDiVU/72/edit

Upvotes: 2

Related Questions