CODEWITHSUNDEEP
javascriptjsonrestember.jsadapter
Hasib Mahmud
Hasib Mahmud

Reputation: 786

EmberJs: RESTAdapter could not get json file, showing error 404 (not found)

My following Ember App works well for FIXTUREAdapter. Now I am trying to use RESTAdapter instead of FIXTURE. But now console displaying Error:

GET http://localhost/myApp/note.json/notes 404 (Not Found).

Error while loading route: undefined

I'm using XAMPP.

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.ApplicationAdapter = DS.RESTAdapter.extend({
  namespace: 'myApp/note.json'
});

App.Router.map(function() {
  this.route('notes');
  this.route('note', { path: 'note/:note_id' });
});

App.NotesRoute = Ember.Route.extend ({
 model: function() {
    return this.store.findAll('note');
 }
});

App.NoteRoute = Ember.Route.extend ({
 model: function(params) {
    return this.store.find('note', params.note_id);
 }
});

App.Note = DS.Model.extend ({
  title: DS.attr('string'),
  body: DS.attr('string')
});

note.json:

{
  "notes": [ 
      {
       id: 1,
       title: 'hello world', 
       body: 'ciao ciao'
      }, 
      { 
       id: 2, 
       title: 'javascript frameworks',
       body: 'Backbone.js, Ember.js'
      },
      {
       id: 3,
       title: 'Find a job in Berlin',
       body: 'Monster'
      }
   ]
}

index.html handlebars template:

<script type="text/x-handlebars" data-template-name="application">
  {{partial 'navbar'}} 
  {{outlet}}
</script>

<script type='text/x-handlebars' data-template-name='_navbar'>
 {{#link-to 'index'}}Home{{/link-to}}
 {{#link-to 'notes'}}Notes{{/link-to}}
</script>

<script type='text/x-handlebars' data-template-name='index'>
 <h1>Index page!</h1>
</script>

<script type="text/x-handlebars" data-template-name="notes">
  <ul class="nav nav-pills nav-stacked">
      {{#each}}
        <li class="list-group-item">
          {{#link-to 'note' this}} {{title}} {{/link-to}}
        </li>
      {{else}}
        <li>No data!</li>
      {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="note">
 <p>{{title}}</p>
 <p>{{body}}</p>
</script>

Upvotes: 0

Views: 560

Answers (1)

user1816877
user1816877

Reputation:

According to the docs, namespace is a prefix.

You probably want this instead:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  namespace: 'myApp'
});

As you're using PHP, rename your notes.json to notes.php, and just make sure the correct headers are set when responding:

<?php
header("Content-Type: application/json");
?>

// Add your json data here:
{
  "notes": [
  {id: 1, ...},
 ]
}

If you're not using any PHP framework, you need to rewrite the url yourself (if you use a framework, it will most likely take care of the url rewriting for you).

Since you're using Apache, just add an .htaccess file to the same directory as the one containing your notes.php file, and add the following rewrite rule:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^notes$ notes.php
</IfModule>

This rewrite rule will enable you to access http://localhost/myApp/notes (without the .php file extension).

You also need to make sure you use valid JSON, i.e. everything should be quoted:

{
    "notes": [
        {
            "id": "1",
            "title": "helloworld",
            "body": "ciaociao"
        },
        {
            "id": "2",
            "title": "javascriptframeworks",
            "body": "Backbone.js, Ember.js"
        },
        {
            "id": "3",
            "title": "FindajobinBerlin",
            "body": "Monster"
        }
    ]
}

You should rather set up your routes like this:

this.resource("notes", function() {
    this.route("view", {
        path: "/:note_id"
    });
});

Then you need to rename your "note" template to "notes/view", like this: <script type="text/x-handlebars" data-template-name="notes/view">

And rewrite your "notes"template:

<script type="text/x-handlebars" data-template-name="notes">
  <ul class="nav nav-pills nav-stacked">
      {{#each note in model}}
        <li class="list-group-item">
          {{#link-to 'notes.view' note}} {{note.title}} {{/link-to}}
        </li>
      {{else}}
        <li>No data!</li>
      {{/each}}
   </ul>
   {{outlet}}
</script>

Upvotes: 1

Related Questions