I have a server server (runs on node.js) and I use Ember (v 2.0.2) and Ember-data (2.0.0) using JQuery (2.1.4). Node.js has body-parser and express installed. External libraries are Ember, Ember-data, and JQuery
When I extract the data using .findAll () method app.ContactsRoute function in the file App.js , I get the following error in the console Chrome Developer
Error processing route: contacts Approval failed: you must specify "id" for undefined in the object passed to "push" Error: assertion failed: you must specify "id" for undefined in the object passed to "push" on a new error (native )
This error also occurs with links to the local host site, where an error is displayed in the Ember-template-compiler and Ember-data lines. I just could not post it here in the question due to the limitation of the placement of hyperlinks in the question
Server.js file:
var express = require('express'),
bodyParser = require('body-parser'),
app=express();
var id = 7;
var data = {
1: {id:1, firstName: 'Danny', lastName: 'Stork', email: 'dannystork@example.com'},
2: {id:2, firstName: 'Carlotta', lastName: 'McOwen', email: 'carlottamcowen@example.com'},
3: {id:3, firstName: 'Luther', lastName: 'Ellery', email: 'lutherellery@example.com'},
4: {id:4, firstName: 'Finch', lastName: 'Hosky', email: 'finchhosky@example.com'},
5: {id:5, firstName: 'Carson', lastName: 'Andrews', email: 'carsonandrews@example.com'},
6: {id:6, firstName: 'Mac', lastName: 'Parker', email: 'macparker@example.com'},
7: {id:7, firstName: 'J.D.', lastName: 'Barney', email: 'jdbarney@example.com'},
};
app.use(bodyParser.json());
app.use(express.static('./public'));
app.route('/api/contacts')
.get(function(req,res){
res.json(Object.keys(data).map(function(key){
return data[key];
}));
})
.post(function(req,res){
var record = req.body
record.id = ++id;
data[record.id] = record;
res.json(record);
});
app.route('/api/contacts/:id')
.get(function(req,res){
res.json(data[req.params.id]);
})
.put(function(req,res){
data[req.params.id]=req.body;
res.json(req.body);
})
.delete(function(req,res){
delete data[req.params.id];
res.json(null);
});
app.get('*', function(req,res){
res.sendFile(__dirname + '/public/index.html');
});
app.listen(3000);
App.js file:
var app = Ember.Application.create();
app.ApplicationAdapter = DS.RESTAdapter.extend({
namespace:'api'
});
app.Contact = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
email: DS.attr('string')
});
app.ContactSerializer = DS.RESTSerializer.extend({
extractArray: function(store, primaryType, payload){
payload ={contacts: payload} ;
return this._super(store,primaryType,payload);
},
extractSingle: function(store, primaryType, payload, recordId){
payload ={contact: payload} ;
return this._super(store,primaryType,payload,recordId);
},
serializeIntoHash: function(hash,type, snapshot,option){
var json = this.serialize(snapshot, {included:true});
Object.keys(json).forEach(function(key){
hash[key] = json[key];
});
}
});
app.Router.reopen({
location: 'history'
});
app.Router.map( function(){
this.route('contacts');
this.route('contact',{path: 'contacts/:contact_id'});
this.route('new',{path: 'contacts/new'});
});
app.IndexRoute = Ember.Route.extend({
redirect: function(){
this.transitionTo('contacts');
}
});
app.ContactsRoute = Ember.Route.extend({
model: function() {
return this.store.findAll('contact');
}
})
Index.html:
<html>
<head>
<title> Ember Contacts </title>
<link rel='stylesheet' href='/style.css' />
<base href="/">
</head>
<body>
<script type='text/x-handlebars' id='application'>
<div id='main'>
<header>
<h1> {{#link-to 'contacts'}} Ember Contacts {{/link-to}}</h1>
</header>
<div id='app'>
{{outlet}}
</div>
</div>
</script>
<script type='text/x-handlebars' id='contacts'>
<div class='actions'>
{{#link-to 'new'}} NEW Contact {{/link-to}}
</div>
<ul>
{{#each contact in model}}
<li>
{{#link-to 'contact' contact}}
{{contact.firstName}} {{contact.lastName}} <span>{{contact.email}}</span>
{{/link-to}}
</li>
{{/each}}
</ul>
</script>
<script src='/lib/jquery/dist/jquery.min.js'></script>
<script src='/lib/ember/ember-template-compiler.js'></script>
<script src='/lib/ember/ember.debug.js'></script>
<script src='/lib/ember-data/ember-data.js'></script>
<script src='/app.js'></script>
</body>
</html>
Can anyone help with this issue? Why does this error occur in ember data?
I am new to ember.js, have finished the tutorial. I could not use the same version that he used in the video. Therefore, the latest version of the Ember and Ember data was used.