在angularjs中从本地JSON文件获取数据

时间:2021-08-04 17:49:35

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.

我想从本地机器上的JSON文件中获取数据。但是我不能得到数据。它显示了$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.

有人能帮我展示一下本地JSON文件的数据吗?提前谢谢。

3 个解决方案

#1


30  

AngularJs < 1.6

AngularJs < 1.6

Try by giving success and failure call backs:

试着给成功和失败打回电话:

$http.get('someFile.json')
      .success(function(data) {
           angular.extend(_this, data);
           defer.resolve();
        })
       .error(function() {
           defer.reject('could not find someFile.json');
        });

AngularJs > 1.6

AngularJs > 1.6

 $http.get('someFile.json').
  then(function onSuccess(response) {
     angular.extend(_this, data);
     defer.resolve();
  }).
  catch(function onError(response) {
   console.log(response);
  });

Refer:Read local file in AngularJS

参考:在AngularJS中读取本地文件

#2


3  

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

您没有像“$http:没有定义”这样的错误消息吗?

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).

如果没有的话,可以使用web developer tools (Ctrl+Shift+I in firefox)。

#3


1  

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

如果你还没有这样做的话。尝试为应用程序设置一个跨域策略。

#1


30  

AngularJs < 1.6

AngularJs < 1.6

Try by giving success and failure call backs:

试着给成功和失败打回电话:

$http.get('someFile.json')
      .success(function(data) {
           angular.extend(_this, data);
           defer.resolve();
        })
       .error(function() {
           defer.reject('could not find someFile.json');
        });

AngularJs > 1.6

AngularJs > 1.6

 $http.get('someFile.json').
  then(function onSuccess(response) {
     angular.extend(_this, data);
     defer.resolve();
  }).
  catch(function onError(response) {
   console.log(response);
  });

Refer:Read local file in AngularJS

参考:在AngularJS中读取本地文件

#2


3  

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

您没有像“$http:没有定义”这样的错误消息吗?

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).

如果没有的话,可以使用web developer tools (Ctrl+Shift+I in firefox)。

#3


1  

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

如果你还没有这样做的话。尝试为应用程序设置一个跨域策略。