How to display json in emberJS?

Question

Im very new to the "JS Framework topic" and now I try to

Get data from a json-file
Display it in a table

Later I want to filter/sort the data, but I want to do it step by step.

What I came up with so far:

app.js

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    model: function(){
        $.ajaxSetup({
            async: false
        });
        $.getJSON("json/json_10k.json", function(json) {
            return json;
        });
    }
});

index.html (part of it):

<script type="text/x-handlebars" id="index">
  <ul>
  {{#each item in model}}
    <li>:{{item.Id}}</li>
  {{/each}}
  </ul>
</script>

Now, I dont see any data/errors. Maybe somebody have an idea, what could be wrong here.

You might want to try to echo the json in the "getJSON" function before returning it. Then you can localize the problem. If the data *loading* isn't the problem then you should try to make an JSFiddle. — Florian Wendelborn, Oct 17 '14 at 12:34
Thanks for the reply @FlorianW. T. The Loading is fine (I checked with Firebug). I guess the problem is, that the getJSON() is async and the data is not returned? — Tream, Oct 17 '14 at 12:37
I think `model` written this way requires a promise as a return, since you technically can't return a value from a callback that way. My Ember is rusty, try `return $.getJSON(...` — Joseph, Oct 17 '14 at 12:37
You cannot return ajax data like that (see http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) so your model is most likely empty. — Spokey, Oct 17 '14 at 12:38

Spokey · Answer 1 · 2014-10-17T13:09:32.027

If you are really want to use async:false you can try the other way around

$.ajaxSetup({
  async: false
});

$.getJSON("json/json_10k.json", function(json) {
  App.IndexRoute = Ember.Route.extend({
    model: json
  });
});

Or return like this

App.IndexRoute = Ember.Route.extend({
    model: function(){
        $.ajaxSetup({
            async: false
        });
        return $.getJSON("json/json_10k.json").responseText; 
               // you maybe need to JSON.parse() here
        // return $.parseJSON($.getJSON("json/json_10k.json").responseText);
    }
});

How to display json in emberJS?

app.js

index.html (part of it):

1 Answers1