Cannot read json file using $http

Question

Using $http to read json from a file:

(function(){
            var countryApp=angular.module("countryApp",[]);
            countryApp.controller("CountryCtrl",function($scope,$http){
                $http.get('countries.json').success(function(data){
                    $scope.countries=data;
                });
            });
            return countryApp;
        })();

The file is in the same folder as the html file,it looks like this:

    [
      {
        "name": "China",
        "population": 135982100
      },
      {
        "name": "India",
        "population": 1205625000
      },
      {
        "name": "United States of America",
        "population": 312247000
      }
   ]

This is the error:

  XMLHttpRequest cannot load file:///home/anr/angular_examples/countries.json. Cross   origin requests are only supported for HTTP. ex10.html:1
 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load    'file:///home/anr/angular_examples/countries.json'.
at Error (native)
at file:///home/anr/angular_examples/js/angular.js:8380:11
at sendReq (file:///home/anr/angular_examples/js/angular.js:8180:9)
at $http.serverRequest (file:///home/anr/angular_examples/js/angular.js:7921:16)
at wrappedCallback (file:///home/anr/angular_examples/js/angular.js:11319:81)
at wrappedCallback (file:///home/anr/angular_examples/js/angular.js:11319:81)
at file:///home/anr/angular_examples/js/angular.js:11405:26
at Scope.$eval (file:///home/anr/angular_examples/js/angular.js:12412:28)
at Scope.$digest (file:///home/anr/angular_examples/js/angular.js:12224:31)
at Scope.$apply (file:///home/anr/angular_examples/js/angular.js:12516:24) angular.js:9778

Tried to create a simple Node server:

var express=require('express');
var app=express();
app.use(express.static('../'));
app.listen(3000);

Still getting this error:

    XHR finished loading: GET "http://localhost:3000/countries.json". angular.js:8380
    Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by'  expression to specify unique keys. Repeater: country in countries, Duplicate key: string:"
    http://errors.angularjs.org/1.2.16/ngRepeat/dupes? p0=country%20in%20countries&p1=string%3A%22
   at http://localhost:3000/js/angular.js:78:12
   at ngRepeatAction (http://localhost:3000/js/angular.js:20025:20)
   at Object.$watchCollectionAction [as fn] (http://localhost:3000/js/angular.js:12128:13)
   at Scope.$get.Scope.$digest (http://localhost:3000/js/angular.js:12251:29)
   at Scope.$get.Scope.$apply (http://localhost:3000/js/angular.js:12516:24)
   at done (http://localhost:3000/js/angular.js:8204:45)
   at completeRequest (http://localhost:3000/js/angular.js:8412:7)
   at XMLHttpRequest.xhr.onreadystatechange  (http://localhost:3000/js/angular.js:8351:11) angular.js:9778

Oleksandr Kelepko · Accepted Answer · 2014-06-17 15:56:19Z

1

You'd better start a simple web server to serve your files. E.g.

$ cd /home/anr/angular_examples
$ python -m SimpleHTTPServer

And open http://127.0.0.1:8000 in your browser.

Alternatively, you can set the –allow-file-access-from-files flag in Chrome: How to set the Google Chrome --allow-file-access-from-files flag

answered Jun 17, 2014 at 15:56

Oleksandr Kelepko

2341 silver badge4 bronze badges

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

Comments

zszep · Accepted Answer · 2014-06-17 16:57:26Z

0

This has to do with the fact that you load the files locally without a server. People suggested a workaround for chrome. If you're using Firefox set the flagsecurity.fileuri.strict_origin_policy to false.

answered Jun 17, 2014 at 16:57

zszep

4,4835 gold badges41 silver badges58 bronze badges

Comments

Yacine Maamar Meddah · Accepted Answer · 2014-08-05 07:58:10Z

0

The problem is that you're running your files on the file:/// protocol, this is the case of ex10.html you load it by double click :) , you've to pass through a web server as apache to see your files on http:// protocol, then your file will be loaded.

answered Aug 5, 2014 at 7:58

Yacine Maamar Meddah

1

Comments

Pablo Mescher · Accepted Answer · 2014-08-05 14:09:09Z

0

It is not possible to read a local file through ajax for security reasons. You could serve the file through a local server and load it from localhost to circumvent this.

Have a look at the http-server module from node. You can install it using npm install --global http-server and then open a console in the folder where the .json file is located. Then run http-server -p 1234 --cors and your .json file should be accessible from a browser in localhost:1234/countries.json (EDIT: I'm assuming you have node installed. If not, install node first)

After all this, doing $http.get("http://localhost:1234/countries.json") should work from inside your app.

edited Aug 5, 2014 at 14:09

answered Jun 17, 2014 at 15:50

Pablo Mescher

27.6k6 gold badges32 silver badges33 bronze badges

2 Comments

vamsiampolu Over a year ago

http-server only runs on port 8080 regardless of the port you specify for it.

Pablo Mescher Over a year ago

@user2309862 you are right, I had the parameter wrong. its -p not --port. See if it works now

Collectives™ on Stack Overflow

Cannot read json file using $http

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related