Search code examples
templatesember.jsember-cli

data from http-mock not showing in template


I set up an http-mock like so on the get http verb

usersRouter.get('/:pin', function(req, res) {
    res.json({
        "users": {
            "id": 1234,
            "pin": 1234,
            "first_name": "John",
            "last_name": "Doe",
            "email": "email@example.com",
            "phone": 8436376960
        }
    });
});

my route is looking up this information like so with a pin number passed as a param from a form input on a previous page

model: function(params) {
    this.store.find('user', params.pin);
}

my template is simply trying to display them like so

<span class="name">{{first_name}} {{last_name}}</span>
<span class="email">{{email}}</span>

Also my model for reference

pin: DS.attr('number'),
first_name: DS.attr('string'),
last_name: DS.attr('string'),
email: DS.attr('string'),
phone: DS.attr('number')

I'm not getting an error in the console but there is nothing displayed on the page, in the ember inspector in the data tab I see my data correctly being passed to the route

Is there some piece I'm missing here? This is my first ember-cli app.

UPDATE:

Based on Buck Doyle's answer I updated the express code like so

usersRouter.get('/:pin', function(req, res) {
    var user = USERS.filter(function(el) {
      return el.pin == req.params.pin;
    });

    res.send({"users": [user]});
});

Which pulls from an array defined outside of the .get like so

var USERS = [
{
  "id": 1,
  "pin": 1234,
  "first_name": "John",
  "last_name": "Doe",
  "email": "email@example.com",
  "phone": 8436376960
},
{
  "id": 2,
  "pin": 5678,
  "first_name": "Jane",
  "last_name": "Smith",
  "email": "email@example.org",
  "phone": 8436375738
}
];

I now get an assertion error

Uncaught Error: Assertion Failed: Error: Assertion Failed: Expected an object as `data` in a call to `push`/`update` for user , but was [object Object]

And the ember inspector no longer shows my data being returned at all.


Solution

  • users should return an array, not an object:

    "users": [{
      "id": 1234,
      "pin": 1234,
      "first_name": "John",
      "last_name": "Doe",
      "email": "email@example.com",
      "phone": 8436376960
    }]
    

    But if this example is correct, you’ll need filtering in your usersRouter. If you save the above as USERS:

    usersRouter.get('/:pin', function(req, res) {
      var pin = req.params.pin;
      var user = USERS.filter(function(user) {
        return user.pin.toString() == pin;
      })[0];
      res.send({"users": user});
    });
    

    I was able to verify the above by running your test application and accessing the store directly, since I don’t understand how your interface is supposed to work.

    store = WmiCheckIn.__container__.lookup('store:main');
    jane = store.find('user', '5678')
    console.log(jane.get('first_name')); // -> Jane