title: Backbone: Getting JSON file from server, to use extension ".json" or not to use it, with url or urlRoot
body: <p>I am doing some exercise to familiarise myself with Backbone. I'm trying to get a JSON file from my server using <code>urlRoot</code> property of the <code>Model</code>. </p>
  
  <p>I get error (404) that says it cannot find the file when I type <code>urlRoot: "./js/json/todo"</code> but if I type it this way <code>urlRoot: "./js/json/todo.json"</code> then it finds it but <code>console.log(todoItem.get('description'))</code> says <code>undefined</code>.</p>
  
  <p>Now, in many Backbone applications that I've seen, most of the time the extension <code>.json</code> is not applied, i.e. this suffices <code>urlRool: "/todos"</code> instead of <code>urlRoot: "/todos.json"</code>. But when I do it without the extension, I get errors.</p>
  
  <ul>
  <li>Can someone explain to me how to use <code>url</code> and <code>urlRoot</code> properties properly? </li>
  <li>And also, what is the issue with not using <code>.json</code> or using it?</li>
  <li>And lastly, is my JSON file format below, good for Backbone?</li>
  </ul>
  
  <p>Backbone:</p>
  
  <pre><code>(function(window, $, Backbone) {
      var TodoItem = Backbone.Model.extend({ urlRoot: './js/json/todos' });
  
      var todoItem = new TodoItem({id: 1});
  
      todoItem.fetch();
  
      console.log(todoItem.get('description')); // This is undefined in the console
  
  }(window, jQuery, Backbone));
  </code></pre>
  
  <p>JSON:</p>
  
  <pre><code>{
      "todos": [
      {
          "description": "Pick Up Milk",
          "status": "incomplete"
      },
  
      {
          "description": "Do shopping at Market",
          "status": "incomplete"
      }]
  }
  </code></pre>