CODEWITHSUNDEEP
javascriptjsonember.js
George Katsanos
George Katsanos

Reputation: 14175

Trying to get json data with Ember

Here what my json data look like: 

[{"id":1,"iam":1,"youare":2,"lat":50.8275853,"lng":4.3809764,"msgbody":"Lorem ipsum lorem ipsum lorem ipsum"}]

Here's my Ember code:

window.Messages = Ember.Application.create();

Messages.Store = DS.Store.extend({
  revision: 11
});

Messages.MessagesRoute = Ember.Route.extend({
  setupControllers: function(controller) {
    controller.set('content', Messages.Message.find());
  }
});

Messages.Message = DS.Model.extend({
  msgbody: DS.attr('string')
});

Messages.MessagesController = Ember.ArrayController.extend({
  content: []
});

The thing is my json data live in /app_dev.php/messages not in /messages/ ...

I am just trying to do just a successful get request but I can't manage... Could you tell what I am doing wrong so I can get some grasp of the Ember syntax?

EDIT Thanks for your answers.Just to inform that after lots of effort to make something trivial, I tried Angular and it seems to do the job better,faster and easier. So I'm switching frameworks.

Upvotes: 1

Views: 568

Answers (3)

Unome
Unome

Reputation: 6900

Ember requires that you use what they call "type keys" in order to successfully read JSON, in other words you need to put the name of a model prior to the object itself for Ember to recognize that is of that type.

In my case, I had made a Java/Spring Backend and did not want to add this to my objects, to get around this in ember you can create a Serializer file, documentation for Ember Serializers, specifically the RESTSerializer can be found here.

To add the typeKey to incoming JSON overide the normalizePayload hook. Here is an example of how I did that: 

normalizePayload: function(type, payload) {
    var json = {};
    json[type.typeKey] = payload;
    return json;
}

If you hadn't put your typeKey's on the JSON on the way out, you'll probably experience similar problems when you PUT or POST data, so you will probably need to overload the serializeIntoHash hook to remove the typeKey's on outgoing data. Here is an example of what worked for me on that:

serializeIntoHash: function(hash, type, record, options){
    Ember.merge(hash, this.serialize(record, options));
}

Hope that helps! I see you are switching to Angular (Great decision, I prefer Angular 100x over Ember but my work requires I use Ember currently, so I'm fighting through it.) But hopefully this can help someone else who is having similar issues and either wants or is forced to use Ember.

Upvotes: 0

Shimon Rachlenko
Shimon Rachlenko

Reputation: 5517

  1. I think that it is better to specify file names via the url option:

    App.Store = DS.Store.extend({ revision: 11, adapter: DS.RESTAdapter.create({ url: "/app_dev.php" }) });

  2. The structure of your JSON should be as follows:

{
    messages: [
        {"id":1,"iam":1,"youare":2,"lat":50.8275853,"lng":4.3809764,"msgbody":"ipsum "},
        {"id":2,"iam":1,"youare":2,"lat":50.8275853,"lng":4.3809764,"msgbody":"Lorem "}
    ]
}

See ember guide for further reference.

Upvotes: 1

Cory Loken
Cory Loken

Reputation: 1395

You'll want to use the namespace option on the adapter. This can be specified as followed and then when you create the store use the MyApp adapter.

MyApp.Adapter = DS.RESTAdapter.extend({
  namespace: 'app_dev.php'
});

Upvotes: 2

Related Questions