2017-02-09 15 views
1

ここにはUpdated Plnkrがあります。JSONデータはMozillaではフォームで表示できますが、Chromeでは表示されませんか?

Angular jsを使用して単純なJSONファイルをフォームにロードしようとしています。しかし、私はChromeのテキストボックスにデータは表示されませんが、Mozillaで見ることができます。クロームについては、私はエラー未満になっています

XMLHttpRequest cannot load file:///C:/Users/hp/Desktop/site/site.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

どこが間違っていますか?

<!DOCTYPE html> 
    <html ng-app="myApp"> 
    <head> 
    <title>Hello</title> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 

    <script> 
    myApp = angular.module('myApp',[]); 
    myApp.controller('myController', function($scope,$http){ 
    $http.get('site.json').success(function(response){ 
     $scope.myData=response; 
    }); 
    }); 
    </script> 

    </head> 
<body ng-controller="myController"> 

    <div ng-repeat="data in myData"> 
     <input type="text" name="">{{data.siteno}} 
     <input type="text" name="">{{data.sitename}} 
    </div> 
</body> 
</html> 
+1

あなたは 'ng-controller =" myController "'のどこかにいますか?また、 '{input type =" text "ng-model =" data.siteno "/>'のように '{{data.siteno}}'をテキストボックスの後ろに置いていますか?それ以外に、あなたのjsonはどのように見えるのですか?私はあなたが '$ scope.myData = response.someVariable;' – devqon

+1

のような何かをするべきだと想像することができます。あなたの応答で最初にjsonデータを取得しているかどうかをコンソールでチェックできます。 とはい@devqonはそれを正しく言及しました。あなたはHTML内のどこかにコントローラを定義しましたか? – Krishna9960

+0

@devqon申し訳ありませんが、正しくフォーマットされていないので、ng-controllerが見つかりませんでした。しかし、あなたは今それを見ることができます。私のjsonデータも投稿します。 – HebleV

答えて

0

を使用する必要があります。このための簡単な解決策は、chrome用のWebサーバープラグインをダウンロードし、サーバーのURLから実行することです。私はMozillaが既にこのエラーを投げないinbuiltプラグインを持っている必要があると推測します。

1

第一エラー

あなたがsite.jsonを呼んでいたが、あなたのファイルがdata.json

$http.get('data.json') 
0命名され ng-app="myApp"

ng-app="myApp" 

第二のエラーを追加する

を忘れてしまいました

第三エラー

あなたがオブジェクトの内部responseを入れたが、データはresponse.data

$scope.myData=response.data; 

ソリューションここ

は、あなたの更新された内側にあるPlunkr

注:あなたは、私が直接、任意のサーバーなしでローカルに実行しようとしていますので、これが起こる.then(function(resp){...}, function(err){...});代わりのsuccess()error()方法

+0

最初の2つのエラーは本当ですか?私のコードでng-appが恋しい? plnkrでは私は "data.json"に名前を変更しましたが、私のコードでは "site.json"と同じです。 3つ目のエラーについては、$ scope.myData = response – HebleV

+0

で動作します。plnkrの作業が表示されますが、コードに組み込むと、同じ2つのエラーが発生します。つまり、1-リソースのロードに失敗しました:net :: ERR_FILE_NOT_FOUND。 2 - Uncaught ReferenceError:角度が定義されていません。スクリプトの前に角度リンクが定義されています。なぜこのエラーがまだ存在するのかわかりません。それはcromeと関係がありますか? – HebleV

+0

'ERR_FILE_NOT_FOUND':ファイルへのパスを確認してください。スクリプトを追加していないために角度が定義されていません – Weedoze

関連する問題