CODEWITHSUNDEEP
javascriptjsonnode.jsangularjs
vamsiampolu
vamsiampolu

Reputation: 6622

Cannot read json file using $http

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

Upvotes: 1

Views: 2522

Answers (4)

Pablo Mescher
Pablo Mescher

Reputation: 27437

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.

Upvotes: 0

Yacine Maamar Meddah
Yacine Maamar Meddah

Reputation: 1

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.

Upvotes: 0

zszep
zszep

Reputation: 4458

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.

Upvotes: 0

Oleksandr Kelepko
Oleksandr Kelepko

Reputation: 234

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

Upvotes: 1

Related Questions