Fetching data from store in controller properly

Ember Data
1

I am Using Ember App kit for my project.

I have a controller set up at controllers/tools/searchpos

var self = this;

            this.store.find('post',"1").then(function(data){
                self.set('mydata',data);
                console.log(self.get('mydata'));
            },
            function(error){
                alert(error);
            });

The output at the console is a class:

__ember1409362510321: "ember443"
__ember_meta__: Object
__nextSuper: undefined
_attributes: Object
_changesToSync: Object
_data: Object
_deferredTriggers: Array[0]
_inFlightAttributes: Object
_loadingPromise: null
_relationships: Object
_suspendedRelationships: false
_updatingRecordArraysLater: false
container: Container
currentState: Object
id: "1"
store: Class
toString: function () { return ret; }
__proto__: Object

and the data is inside the __data key…

http://localhost:8000/api/posts/1 gives

{
  "post": {
    "id": 1,
    "title": "Rails is omakase",
    "comments": [
      "1",
      "2"
    ],
    "user": "dhh"
  },
  "comments": [
    {
      "id": "1",
      "body": "Rails is unagi"
    },
    {
      "id": "2",
      "body": "Omakase O_o"
    }
  ]
}
2

So what is the question?

3

as you see this is not the json format that i can use on my template to display posts and comments.How to achieve that?..

4

Sounds like a bad Ember data setup. How did you setup your data adapter?

5

i am using the default ember app kit adapter setting which is like this

var ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: 'api'
});

export default ApplicationAdapter;

I am using api-stub for mock data

module.exports = function(server) {

  server.namespace('/api', function() {

    server.get('posts/:id', function(req, res) {
      var post = 
      {
  "post": {
    "id": 1,
    "title": "Rails is omakase",
    "comments": ["1", "2"],
    "user" : "dhh"
  },

  "comments": [{
    "id": "1",
    "body": "Rails is unagi"
  }, {
    "id": "2",
    "body": "Omakase O_o"
  }]
}
      res.send(post);
    });
  });
};
6

hmm this sounds odd… Did you setup the serializer? http://iamstef.net/ember-app-kit/guides/ember-data.html

Just to be sure… Em app kit has been deprecated in-favour of the ember-cli project. You might look for that for current support and to be future compatible.

7

ok…just one more thing…

routes/index.js

 model: function(){
return this.store.find('post',1);
}

templates/index.hbs

{{title}}  //i get  the title when the url is localhost:8080/

But when i do this

/routes/tools/searchpos

 model: function(){
return this.store.find('post',1);
}

/templates/tools/searchpos

{{title}}  //no data  when i go to  localhost:8000/#/tools/searchpos

but i can see that in networks a request has been made and response came

Why this different behaviour?? Is there some problem with the appkit?

8

Well, it depends on the way you define your routes… In a resourceRoute you have the ToolsSearchPosRoute and the ToolsSearchPosIndexRoute. So you might need to define that indexRoute.

If you use the EmberAddon for Chrome or Firefox, you can perfectly see the context of your view, so your sure the context you are in.

9

Can you make a jsbin or something similar to look at? I’m not sure if this helps, but I think you have to opt-in for side-loading. @gerrit, the index route doesn’t matter, since he’s using the top template without an outlet.

10

@ulisesrmzroche It was some error on my part.

Can you tell me…i have a getrank button which is supposed to make get request to the server

So for this i wrote a Getrank function in controller inside which i have this

var self = this;

            this.store.find('post',"1").then(function(data){
                self.set('mydata',data);
                console.log(self.get('mydata'));
            },
            function(error){
                alert(error);
            })

It returns a class.,instead i need a json to work on

Is it a normal behaviour or am i doing something wrong?

11

Not sure if I correctly understand your problem but what you’re seeing on console is an EmberData object. Your JSON is deserialized and you can find your data in _data object property, or if you type mydata.get('title') for example.

In a template your {{title}} helper is hitting the model object associated with the controller. But if your data is on myDatavariable you’ll see nothing unless you specify the right variable: {{myData.title}}.

12

It’s returning a DS.PromiseArray or something like that. It’s because you’re fetching with Ember Data. If you want to get ahold of the underlying content, use _data like @nandosan mentioned, or you can call ‘this.get(‘content’)’ to get ahold of the underlying array directly. If all you really want to do is work with raw json, you could use jQuery, or a module called ic-ajax, or whatever AJAX/Promise library of your choice.

13

thanks… i got it