Get data from route as JSON for jQuery/fullcalendar

@brx wrote:

How do I get JSON from store for jQuery/fullcalender?

component template:

{{yield}}

component JS:

export default Component.extend({
  didInsertElement() {
    $('.jquerycal').fullCalendar({
      events: this.get('events')
  },
  willDestroyElement() {
    $('.jquerycal').fullCalendar().destroy();
  }
});

first approach was hardcoding some array with data, which works:

export default Route.extend({
  model() {
    return [{
      type: 'events',
      id: '96',
      title: 'All Day Event',
      start: '2018-10-01',
      color: '#783f53'
    },...]
  }
});

then tried another route, which works as well (with plain json returned):

export default Route.extend({
  model() {
   return new RSVP.Promise(function(resolve) {
     later(function() {
       let data = Ember.$.getJSON('http://someurl.com/data?start=2018-08-27&end=2018-10-08');
       resolve(data);
      }, 400);
   });
  }
});

but now, with the following route, I got stuck. I use mirage to get the data.

export default Route.extend({
  model() {
    return this.store.findAll('event');
  }
});

In the console I see mirage returning succesfully data. When I do the following in the component JS…

console.log(this.get('events'));

… I’ll get an object.

I tried some things like…

let dataArr = this.get('events');
dataArr.map(item => {
    console.log(item.get('title'));
});

… which returns all titles, but fullcalender expects the complete JSON of all events.

I’m sure I’m overlooking something, but I don’t get it.

Posts: 3

Participants: 3

Read full topic