How to call a JSON file from Angularjs Module

Question

I am new in AngularJS. I have a situation where I need to call and read a json file. Here is my Code

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="todo in todos">
        {{todo.text}} - <em>{{todo.done}}</em>
        </li>
    </ul>
    </div>
    <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $http) {
        $http.get('todos.json').success (function(data){
            $scope.todos = data;
        });
    });
    </script>
    </body>
    </html>

This code runs fine in firefox but not in Chrome. please help me..

no error message is coming. but when i go to console then there was a error message- XMLHttpRequest cannot load file:///C:/Users/USER/Desktop/todos.json. Received an invalid response. Origin 'null' is therefore not allowed access. — Subho, Aug 29 '14 at 09:32
@Subho it seems that you need to use a webserver, Chrome doesn't allow request from local or `file://`resources. See http://stackoverflow.com/questions/4208530/xmlhttprequest-origin-null-is-not-allowed-access-control-allow-origin-for-file — khakiout, Aug 29 '14 at 09:45
Can you try to open your file via web Server. Chrome does not allow AJAX requests for `file:///` URLs. Try to open it like `http://localhost/PathToYourFile`. You need to copy your file into your app to get it via WebServer. — Patrick, Aug 29 '14 at 09:46
yup.. when i try to run this code from Netbeans or Eclipse, its working. Do i need to change anything in my code?? Thank you all for your cooperation. — Subho, Aug 29 '14 at 09:50
What khakiout says, but that basically means that there is no problem here. You can just do your early development tests using Firefox on your local drive for now and when you are ready to move to a webserver so everything is serviced through HTTP, you'll find that Chrome works too. — Gimby, Aug 29 '14 at 09:51

score 0 · Answer 1 · answered Feb 15 '16 at 16:57

Chrome doesn't allow request from local or file:// resources, You can use Safari for this matter or use Xampp (server environment on your computer). If you want to run your angular site on chrome then you will need to go in your cmd go to the folder where chrome is and type. (Make sure Chrome is closed when you do this)

chrome.exe --disable-web-security

Where ever the chrome is installed in your system. :) Hope it helps.

How to call a JSON file from Angularjs Module

1 Answers1