2015-11-17 12 views
14

私のローカルマシン上にあるJSONファイルからデータをフェッチしたいと思います。しかし、私はデータを得ることができません。 $ httpのクロスドメインエラーを示しています。ローカルJSONファイルのフェッチンデータ

ここに私のコードです。

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;}); 

誰でも、ローカルJSONファイルからデータを表示する方法を教えてください。 ありがとうございました。

+0

あなたはフィドルを追加できますか? – Shreyas

+0

また、特定のエラーを表示することができますか? – xeon48

答えて

24

AngularJs <成功と失敗のコールバックを与えることによって、1.6

試してみてください。

$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

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

参照してください:Read local file in AngularJS

+3

.successは推奨されていません。代わりに.thenを使用します;) – LOTUSMS

1

まだ行っていない場合は、アプリケーションにcrossdomainポリシーを設定してみてください。

2

"$ http:is not defined"のようなエラーメッセージはありませんか?

私はこれが動作している、コントローラと試してみました:

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); 
    }); 
    } 
}]); 

あなたがいない場合は、使用のWeb開発ツール(FirefoxでCtrlキー+ Shiftキー+ I)。

+1

私はこのエラーを取得しています - > XMLHttpRequestはファイルをロードできません:/// C:/Users/Handson/webtest.json。 Cross origin requestは、http、data、chrome、chrome-extension、https、chrome-extension-resource – Amit

+0

のプロトコルスキームでのみサポートされています。ローカルファイルへのアクセス権(セキュリティ上の理由)がないからです。この種のエラーを回避するには、ローカルWebサーバー(Apacheなど)を使用する必要があります。 – Pico12

関連する問題