Ember.js loading simple data from API

Question

So, I have a simple page with Ember.js where i'm trying to load data from rest api.

Api is provided by apiary.io and returns the following simple data

{"semantics": [
 {key : "11111", name : "Block 1"},
 {key : "22222", name : "Block 2"},
 {key : "33333", name : "Block 3"},
 {key : "44444", name : "Block 4"},
 {key : "55555", name : "Block 5"}
]}

The problem is model that accquires data by App.Semantic.find() and it does not put items to template.

But it works as expected, if I set array value in route

App.SemanticRoute = Ember.Route.extend({
    model: function () {
        //return App.Semantic.find();
        return [{key:111,name:"aaaa"},{key:222,name:"qqqqq"},
                {key:3333,name:"bbbb"},key:555,name:"ccc"}];
    }
});

Where is the problem?

The link to API - http://bug0r.apiary.io/api/semantics

The jsFiddle with code - jsfiddle

Full code here

var App = window.App = Ember.Application.create({
    VERSION: '1.0',
    rootElement: '#appRoot',
    LOG_TRANSITIONS: true
});
App.deferReadiness(); // do not initialize it until we are ready

App.Adapter = DS.RESTAdapter.extend({
    namespace: 'api',
    url: 'http://bug0r.apiary.io'
});
App.Adapter.map('Semantic', {
    primaryKey: 'key'
});
App.Store = DS.Store.extend({
    revision: 12,
    adapter: App.Adapter
});

App.Router.map(function () {
    // each call will create Ember.Route instance for customizing route
    this.resource("semantic", {
        path: "/"
    });
    this.route("about", {
        path: "/about"
    });
});

/* Symantic model*/
App.Semantic = DS.Model.extend({
    key: DS.attr('string'),
    name: DS.attr('string'),
});

App.SemanticRoute = Ember.Route.extend({
    model: function () {
        return App.Semantic.find();
    }
});

App.advanceReadiness(); // ready for initialization

Edit: 1. JSON api fixed, but still not work.

ddewaele · Accepted Answer · 2013-05-06 08:56:45Z

1

The API returns invalid JSON (key value should not be seperated by = but by : and properties should be enclosed in quotes)

{ "semantics": [
{key = "11111", name = "Block 1"},
{key = "22222", name = "Block 2"},
{key = "33333", name = "Block 3"},
{key = "44444", name = "Block 4"},
{key = "55555", name = "Block 5"}
] }

Should be

{ "semantics": [
{"key":"11111", "name":"Block 1"},
{"key":"22222", "name":"Block 2"},
{"key":"33333", "name":"Block 3"},
{"key":"44444", "name":"Block 4"},
{"key":"55555","name":"Block 5"}
] }

edited May 6, 2013 at 8:56

answered May 6, 2013 at 8:34

ddewaele

22.6k10 gold badges75 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ddewaele Over a year ago

check updated answer. JSON properties need to be enclosed in quotes according to the JSON spec.

Collectives™ on Stack Overflow

Ember.js loading simple data from API

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related