Fetching data from local JSON File in angularjs

Question

I want to fetch data from JSON file which is on my local machine. But I am not able to get the data. It is showing some cross domain error for $http.

Here is my code.

angular.module('myApp',[])
  .controller('myCtrl', function ($scope, webtest) {
     webtest.fetch().then(function (data) {
         $scope.accounttype = data;
     })
});

.factory('webtest', function($q, $timeout, $http) {
    var Webtest = {
        fetch: function(callback) {
            return $timeout(function() {
                return $http.get('webtest.json')
                .then(function(response) {
                      return response.data;
                });
            }, 30);
         }
    };
    return Webtest;
});

Anyone please help me how to display data from local JSON file? Thanks in Advance.

could you also show us the specific error? – notAChance Nov 17 '15 at 09:31 — notAChance, Nov 17 '15 at 09:31

score 41 · Accepted Answer · edited Aug 30 '18 at 17:39

41

It's very simple like

$http.get('phones/phones.json').then(function(response) {
   $scope.phones = response.data;
});

Refer:http://stackoverflow.com/questions/21589340/read-local-file-in-angularjs

edited Aug 30 '18 at 17:39

georgeawg

48,608
13
72
95

answered Nov 17 '15 at 10:00

Arun

1,177
9
15

4

.success is deprecated. Use .then instead ;) – LOTUSMS Apr 03 '17 at 13:50
Unless and until the site is hosted on a local server, i don't think this should work. Please make sure you host your project on a local server and then access the .json file. It is then that the code should work fine. – Gurunath Rao Dec 18 '21 at 11:00

score 3 · Answer 2 · answered Nov 17 '15 at 09:55

3

Don't you have an error message like "$http: is not defined" ?

I tried with a controller, this is working :

var ngApp = angular.module("ngApp", []);

ngApp.controller('myController', ['$http', function($http){
  var thisCtrl = this;

  this.getData = function () {
  this.route = 'webtest.json';
  $http.get(thisCtrl.route)
    .success(function(data){
      console.log(data);
    })
    .error(function(data){
      console.log("Error getting data from " + thisCtrl.route);
    });  
  }
}]);

If you haven't, use web developer tools (Ctrl+Shift+I in firefox).

answered Nov 17 '15 at 09:55

Pico12

1,229
12
18

1

I am getting this Error-> XMLHttpRequest cannot load file:///C:/Users/Handson/webtest.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource – Amit Nov 17 '15 at 15:21
I guess it's because you don't have the right to access local files (security reason). You should use a local web server (like apache) to avoid this kind of error. – Pico12 Nov 18 '15 at 12:15

score 2 · Answer 3 · answered Nov 17 '15 at 09:36

2

If you haven't already done so. Try setting up a crossdomain policy for your application.

answered Nov 17 '15 at 09:36

Hardik Patel

3,868
1
23
37

Fetching data from local JSON File in angularjs

3 Answers3

Linked