Use Node.js to create an API for Ember

Question

Use Node.js to create an API for Ember

I made an API with Express.js for Ember.js, when I curl everything is ok but on the Ember App I got some strange errors : enter image description here

Here is my Node.js app code :

var express = require('express'), http = require('http');
var app = express();
var mysql = require('mysql');

var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'blog-api'
});


connection.connect();

app.get('/', function(req, res) {
    res.end('/');
});

app.get('/posts', function(req, res) {
    connection.query('SELECT * FROM posts', function(err, rows, fields) {
        res.send(JSON.stringify({
            posts: rows
        }), 200);
    });
});




http.createServer(app).listen(8080, function(){
  console.log("Express server listening on port 8080");
});

Where do you think the error come from ? Thanks for your help.

node.js
ember.js
ember-data

Answer 1

A few comments:

1) You might have spelling mistake in:

App.Post = DS.Model.extend({
    titre: DS.attr('string'),

it should be title if your query returns this property.

2)You have:

app.get('/', function(req, res) {
    res.end('/');
});

nodejs won't let you perform a cross origin query, and your node code doesn't serve the client files (Ember/js/etc...), so:

Either permit cross domain policy, you can do this by:

app.use(function (req, res, next) {
        res.header("Access-Control-Allow-Origin", req.header('origin'));
        res.header("Access-Control-Allow-Headers", "X-Requested-With");

        next()
})

Or serve your html files via res.render instead of res.end('/').

3) If client files served externally better change URL to full path, like:

http://localhost:8080

4) Im not sure about the structure being returned by the SQL query but ensure the result is exactly as Ember-data expects, in your specific example it should result:

{"posts":[{"title":"Post1"},{"title":"Post2"}]}

Hope it helps, gluck.

Answer 2

Yes, you're right, here is the Ember.js code :

EmberDemo.Router.map(function () {
  this.resource('posts', function(){
    this.resource('post', {path: '/:post_id'});
  });
  this.route('about');
});


EmberDemo.Store = DS.Store.extend({
  revision: 12,
  adapter: DS.RESTAdapter.extend({
    url: 'localhost:8080'
  })
});

EmberDemo.PostsRoute = Ember.Route.extend({
    model: function() { 
        return EmberDemo.Post.find();
    }
});

EmberDemo.Post = DS.Model.extend({
    titre: DS.attr('string'),
    description: DS.attr('string'),
    contenu: DS.attr('contenu')
});