title: Unable to make a $http.get request to a local JSON file using Angular
body: <p>I'm making a weather application where I need to grab a local JSON file from within my controller and then do stuff with the data. However, I can't get a <strong>local</strong> <code>$http.get</code> request to work for some reason. What should I do?</p>
  
  <p>This is my current code:</p>
  
  <pre><code>var weatherApp = angular.module('weatherApp', []); 
  
  weatherApp.controller('weatherCtrl', function ($scope, $http) {
      $scope.cities = [],
      $scope.getCities = (function() {
          $http.get('http://localhost:81/Webb/angular projekt/jsons/cities.json')
               .success(function(data, status, headers, config) {
  
                   console.log(data);
               })
               .error(function(data, status, headers, config) {
                   console.log(status);
               });
      }())
  }
  </code></pre>
  
  <p>Which gives me this error: </p>
  
  <pre><code>SyntaxError: Unexpected token {                                         angular.js:11598
  at Object.parse (native)
  at oc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:14:156)
  at Yb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:77:190)
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:50
  at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:7:302)
  at Yc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:32)
  at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:79:165)
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:112:343
  at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:126:193)
  at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:123:286)
  </code></pre>
  
  <p>I also tried using <code>jsons/cities.json</code> but that throws this error:</p>
  
  <pre><code>Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
  </code></pre>
  
  <p>Making a get request to an external resource works fine, but whenever I do it locally things just doesn't seem to work. </p>
  
  <p>The JSON file I'm trying to get looks like this:</p>
  
  <pre><code>{"cities": {
  
      {   
          city: "Stockholm", 
          latitud: "59", 
          longitud: "18",
          id: "sthlm"
      }, 
      {
          city: "Göteborg", 
          latitud: "58", 
          longitud: "12",
          id: "gbg"
      },
      {
          city: "Malmö", 
          latitud: "55", 
          longitud: "13",
          id: "malmo"
      },
      {
          city: "Umeå", 
          latitud: "63", 
          longitud: "20",
          id: "umea"
      }
  }
  }
  </code></pre>