Can't access JSON file exists in the same folder : AngularJS

Question

I try to use a JSON file, JSON file exists in the same folder with my HTML file.

<html ng-app="countryApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', []);
      countryApp.controller('CountryCtrl', function ($scope, $http){
        $http.get('countries.json').success(function(data) {
          $scope.countries = data;
        });
      });
    </script>
  </head>
  <body ng-controller="CountryCtrl">
    <table>
      <tr>
        <th>Country</th>
        <th>Population</th>
      </tr>
      <tr ng-repeat="country in countries">
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
  </body>
</html>

But when I load my HTML file I get a console error saying:

XMLHttpRequest cannot load file://countries.json/. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

notAChance · Accepted Answer · 2015-11-20 10:02:58Z

1

What you can do is change $http.get('countries.json').success(function(data) { to this

$http.get("http://localhost:9009/yourFolderName/countries.json").then(function (data) {

assuming you are running http local server on port 9009.

answered Nov 20, 2015 at 10:02

notAChance

1,4304 gold badges19 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

baklazan · Accepted Answer · 2015-11-20 10:03:10Z

1

You can't load other files from your javascript on localhost, due to security issues. Try running your page in http server.

If you have python you can just write python -m SimpleHTTPServer 8000 in your console where working directory is your source folder and then open http://localhost:8000 .

edited Nov 20, 2015 at 10:03

answered Nov 20, 2015 at 9:25

baklazan

8196 silver badges13 bronze badges

Collectives™ on Stack Overflow

Can't access JSON file exists in the same folder : AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related