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.

can you add a fiddle]

Shreyas
– Shreyas

2015-11-17 09:28:29 +00:00
Commented Nov 17, 2015 at 9:28 — Shreyas
– Shreyas, Commented Nov 17, 2015 at 9:28
could you also show us the specific error?

notAChance
– notAChance

2015-11-17 09:31:37 +00:00
Commented Nov 17, 2015 at 9:31 — notAChance
– notAChance, Commented Nov 17, 2015 at 9:31

georgeawg · Accepted Answer · 2018-08-30 17:39:05Z

42

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, 2018 at 17:39

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Nov 17, 2015 at 10:00

Arun

1,1839 silver badges15 bronze badges

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

2 Comments

LOTUSMS Over a year ago

.success is deprecated. Use .then instead ;)

Gurunath Rao Over a year ago

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.

Pico12 · Accepted Answer · 2015-11-17 09:55:04Z

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, 2015 at 9:55

Pico12

1,28912 silver badges18 bronze badges

2 Comments

Amit Over a year ago

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

Pico12 Over a year ago

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.

Hardik Patel · Accepted Answer · 2015-11-17 09:36:03Z

2

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

answered Nov 17, 2015 at 9:36

Hardik Patel

3,9581 gold badge27 silver badges39 bronze badges

Collectives™ on Stack Overflow

Fetching data from local JSON File in angularjs

3 Answers 3

2 Comments

2 Comments

Comments

Hot Network Questions