CODEWITHSUNDEEP
javascriptjqueryjsonember.js
otto-null
otto-null

Reputation: 772

Ember JSON Loading Issue - Error while loading route: undefined

I have the following very simple file, but when I load it by going to the #/myitem path, in the console I get "Error while loading route: undefined". The json file contents for testdata.json are shown in a comment at the top of the file. I have validated through fiddler that the JSON file is coming down OK. Any help would be great!

<head>
    <meta charset=utf-8 />
    <script src="js/libs/jquery-1.10.2.js"></script>
    <script src="js/libs/handlebars-v1.3.0.js"></script>
    <script src="js/libs/ember-1.4.0.js"></script>
    <script src="js/libs/ember-data.js"></script>
</head>

<body>

<!--
Here is what is in testdata.json:

[
    {  letter:"A", frequency:0.01492 },
    {  letter:"B", frequency:0.08167 }
]

-->

<script type="text/x-handlebars" id="application">
    <h1>Welcome to this Demo!!</h1>
    {{outlet}}
    <h1>Bye!!</h1>
            {{#link-to "myitem"}}My Item Route{{/link-to}}
</script>

<script type="text/x-handlebars" id="myitem">
    <h2>Some Items</h2>
    <ul>
        {{#each}}
        <li>{{letter}}</li>
        {{/each}}
    </ul>
</script>

<script language="JavaScript">

App = Ember.Application.create({
});

App.Router.map(function() {
    this.route('myitem');
});

App.MyitemRoute = Ember.Route.extend({
    model: function() {
        var data = Ember.$.getJSON('testdata.json');
        return data;
    }
});

</script>

</body>

Upvotes: 1

Views: 1034

Answers (1)

mpd106
mpd106

Reputation: 768

This looks to be caused by testdata.json not containing valid json.

RFC 4627 states "a name is a string" meaning names need to be in quotes, whereas in your case letter and frequency aren't quoted. I've had a quick go at reproducing this locally, and fixing up the quoting appears to resolve the issue. Try pasting this into testdata.json:

[ {"letter": "hello"}, {"letter": "world"} ]

Upvotes: 1

Related Questions