Unable to map store's response to model - EmberJS

Question

I am trying an ember application where I have installed Mirage and tried to fake the server. I am using a RestAdapter, the model is not getting the data from the response.

adapters/application.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
});

contacts.js (Model)

import DS from 'ember-data';
import ContactModel from 'c360-app/models/contactsmodel';
export default ContactModel.extend({
    contactname: DS.attr(''),
    groupid: DS.attr(''),
    email: DS.attr(''),
    contactnumber: DS.attr('')
});

all.js (route)

import ContactRoute from 'c360-app/routes/contactsroute';
export default ContactRoute.extend({
    model: function() {
        return this.store.findAll('contacts');
    }
});

fixtures/contacts.js

export default [  
    {
        contactname: 'Anusha Swaminathan',
        groupid: '12345',
        email: '[email protected]',
        contactnumber: '+91 12345',
        isFavourite: true,
        isIncomplete: false,
        isActive: true,
        hasAccess: true
    }, {
        contactname: 'Sriram Swaminathan',
        groupid: '12345',
        email: '[email protected]',
        contactnumber: '+91 12345',
        isFavourite: true,
        isIncomplete: false,
        isActive: true,
        hasAccess: true
    }, {
        contactname: 'Bhuvaneswari Swaminathan',
        groupid: '12345',
        email: '[email protected]',
        contactnumber: '+91 12345',
        isFavourite: false,
        isIncomplete: false,
        isActive: true,
        hasAccess: true
    }
];

scenarios/default.js

export default function( server ) {
   server.loadFixtures();
}

Config.js (Mirage)

export default function() {
  this.get('/contacts', function(db){
    return {contacts: db.contacts};
  });
}

contact-listing.hbs

    <table class = "contacts-table-header">
        <tr>
            <th>Contact Name</th>
            <th>Group ID </th>
            <th>Email Address</th>
            <th>Contact Number</th> 
        </tr>
{{#each model as |contact|}}
        <tr>
            <td>{{contact.contactname}}</td>
            <td>{{contact.groupid}}</td>
            <td>{{contact.email}}</td>
            <td>{{contact.contactnumber}}</td>
        </tr>

{{/each}}
</table>

I have no idea where I am going wrong.

Pls guide. Thanks in advance!!

Answer 1

In all.js (route) You can try with return this.store.findAll('contact'); and model file name instead of contacts.js say contact.js