AngularJS：factory $ http.get JSONファイル

Question

ハードコードされたJSONファイルだけでローカルに開発しようとしています。 （JSONバリデータに入れたときに有効）、以下のように私のJSONファイルは次のとおりです。

{ 
    "contentItem": [ 
      { 
      "contentID" : "1", 
      "contentVideo" : "file.mov", 
      "contentThumbnail" : "url.jpg", 
      "contentRating" : "5", 
      "contentTitle" : "Guitar Lessons", 
      "username" : "Username", 
      "realname" : "Real name", 
      "contentTags" : [ 
       { "tag" : "Guitar"}, 
       { "tag" : "Intermediate"}, 
       { "tag" : "Chords"} 
      ],  
      "contentAbout" : "Learn how to play guitar!", 
      "contentTime" : [ 
       { "" : "", "" : "", "" : "", "" : ""}, 
       { "" : "", "" : "", "" : "", "" : ""} 
      ],   
      "series" :[ 
       { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" }, 
       { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" } 
      ] 
     },{ 
      "contentID" : "2", 
      "contentVideo" : "file.mov", 
      "contentThumbnail" : "url.jpg", 
      "contentRating" : "5", 
      "contentTitle" : "Guitar Lessons", 
      "username" : "Username", 
      "realname" : "Real name", 
      "contentTags" : [ 
       { "tag" : "Guitar"}, 
       { "tag" : "Intermediate"}, 
       { "tag" : "Chords"} 
      ],  
      "contentAbout" : "Learn how to play guitar!", 
      "contentTime" : [ 
       { "" : "", "" : "", "" : "", "" : ""}, 
       { "" : "", "" : "", "" : "", "" : ""} 
      ],   
      "series" :[ 
       { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" }, 
       { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" } 
      ] 
     } 
    ] 
} 

私はJSONを工場内でハードコードされたときに働いて私のコントローラ、工場、およびHTMLを得ています。しかし、JSONを$ http.getコードに置き換えたので、動作しません。私は$ httpと$ resourceのいろいろな例を見てきましたが、どこに行くのかは分かりません。私は最も簡単な解決策を探しています。私は、ng-repeatや同様の指令のためにデータを取得しようとしています。

工場：

theApp.factory('mainInfoFactory', function($http) { 
    var mainInfo = $http.get('content.json').success(function(response) { 
     return response.data; 
    }); 
    var factory = {}; // define factory object 
    factory.getMainInfo = function() { // define method on factory object 
     return mainInfo; // returning data that was pulled in $http call 
    }; 
    return factory; // returning factory to make it ready to be pulled by the controller 
}); 

任意およびすべてのヘルプは高く評価されています。ありがとう！

Answer 1

さて、ここに見て、物事のリストです：

1）あなたはどのような種類のWebサーバを実行し、単にファイルをテストしていない場合：//index.htmlを、あなたはおそらく実行しています同じ起源の政策問題に陥る。参照：

https://code.google.com/archive/p/browsersec/wikis/Part2.wiki#Same-origin_policy

多くのブラウザは、他のローカルにホストされたファイルにアクセスするためにホストされたファイルをローカルに許可されていません。 Firefoxはこれを許可しますが、ロードしているファイルがhtmlファイル（またはサブフォルダ）と同じフォルダに含まれている場合のみです。

2）成功の関数が（$ http.getから返された）すでにあなたのための結果オブジェクトを分割：

$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) { 

だから、機能（応答）で成功を呼び出し、response.dataを返すために冗長です。

3）成功の機能は、あなたがそれを渡す関数の結果を返さないので、これはあなたがそれがないと思う何をしていません。

：

var mainInfo = $http.get('content.json').success(function(response) { 
     return response.data; 
    }); 

これは、あなたが意図したものに近いです

var mainInfo = null; 
$http.get('content.json').success(function(data) { 
    mainInfo = data; 
}); 

4）しかし、あなたが本当にやりたいことは、データのロード移入されますプロパティを持つオブジェクトへの参照を返すので、このようなものです：

theApp.factory('mainInfo', function($http) { 

    var obj = {content:null}; 

    $http.get('content.json').success(function(data) { 
     // you can do some processing here 
     obj.content = data; 
    });  

    return obj;  
}); 

mainInfo.contentはnullを開始し、データがロードされると、それをポイントします。

また、あなたが実際に約束$ http.getリターンを返し、それを使用することができます。

theApp.factory('mainInfo', function($http) { 
    return $http.get('content.json'); 
}); 

をそしてあなたは、コントローラでの計算で非同期に値を使用することができます。

$scope.foo = "Hello World"; 
mainInfo.success(function(data) { 
    $scope.foo = "Hello "+data.contentItem[0].username; 
}); 

Answer 2

この答えは私をたくさん助け、正しい方向に私を指摘しましたが、私にとってはうまくいけば、そして他の人にはうまくいけば、他の人は：

menuApp.controller("dynamicMenuController", function($scope, $http) { 
$scope.appetizers= []; 
$http.get('config/menu.json').success(function(data) { 
    console.log("success!"); 
    $scope.appetizers = data.appetizers; 
     console.log(data.appetizers); 
    });  
}); 

Answer 3

私はおおよそこれらの問題があります。 Visual Studio 2013からAngularJsアプリケーションをデバッグする必要があります。

デフォルトでは、IIS Expressはローカルファイル（jsonなど）へのアクセスを制限しています。

ただし、最初のJSONにJavaScriptシンタックスがあります。

2番目：javascriptファイルが許可されています。だから、

：JS（data.json->data.js）へ

1. リネームJSON。

2. 正しいロードコマンド（$http.get('App/data.js').success(function (data) {...

3. 負荷スクリプト）<script src="App/data.js"></script>（ページへ

次使用ロードされたデータを通常の方法をdata.js。それはもちろん、ただの回避策です。

Answer 4

Accepted Answerのの4番目の部分が間違っています。

theApp.factory('mainInfo', function($http) { 

var obj = {content:null}; 

$http.get('content.json').success(function(data) { 
    // you can do some processing here 
    obj.content = data; 
});  

return obj;  
}); 

それがデータを受信する前にobjが常に返されますので、@Karl Zillesが書いたように、上記のコードは失敗します（したがって、値は常にnullになります）、我々は非同期呼び出しを行っているためです。同様の質問の

詳細は、あなたが非同期呼び出しをしたい時に取得したデータに対処するために$promiseを使用し、角度で

---

this postで議論されています。

最も簡単なバージョンが

theApp.factory('mainInfo', function($http) { 
    return { 
     get: function(){ 
      $http.get('content.json'); // this will return a promise to controller 
     } 
}); 


// and in controller 

mainInfo.get().then(function(response) { 
    $scope.foo = response.data.contentItem; 
}); 

私はsuccessとerror私はちょうどこれらの2つの方法が廃止され、docから発見された使用していない理由です。

$http従来の約束方法の成功とエラーは廃止されました。代わりに標準thenメソッドを使用してください。

Answer 5

++これは私に役立ちました。ngMocksライブラリをテストするときには、このようなデ乱雑としてユースケースのためにvanilla javascirptと良いことだ：

<!-- specRunner.html - keep this at the top of your <script> asset loading so that it is available readily --> 
<!-- Frienly tip - have all JSON files in a json-data folder for keeping things organized--> 
<script src="json-data/findByIdResults.js" charset="utf-8"></script> 
<script src="json-data/movieResults.js" charset="utf-8"></script> 

これはJSONデータ最後に

// json-data/JSONFindByIdResults.js 
var JSONFindByIdResults = { 
    "Title": "Star Wars", 
    "Year": "1983", 
    "Rated": "N/A", 
    "Released": "01 May 1983", 
    "Runtime": "N/A", 
    "Genre": "Action, Adventure, Sci-Fi", 
    "Director": "N/A", 
    "Writer": "N/A", 
    "Actors": "Harrison Ford, Alec Guinness, Mark Hamill, James Earl Jones", 
    "Plot": "N/A", 
    "Language": "English", 
    "Country": "USA", 
    "Awards": "N/A", 
    "Poster": "N/A", 
    "Metascore": "N/A", 
    "imdbRating": "7.9", 
    "imdbVotes": "342", 
    "imdbID": "tt0251413", 
    "Type": "game", 
    "Response": "True" 
}; 

が含まれているあなたのjavascriptファイルで、任意の場所にJSONデータを操作あなたのコード内

// working with JSON data in code 
var findByIdResults = window.JSONFindByIdResults; 

注： -これはテストには最適ですし、karma.conf.jsでも以下のようにテストを実行するためにこれらのファイルを受け付けます。また、私はこれを推奨しています。データを整理するには、testing/developmentの環境が必要です。

// extract from karma.conf.js 
files: [ 
    'json-data/JSONSearchResultHardcodedData.js', 
    'json-data/JSONFindByIdResults.js' 
    ... 
] 

これが役に立ちます。私のために働いた

++この回答https://stackoverflow.com/a/24378510/4742733

UPDATE

の上に構築され、より簡単な方法は、単に何でもJSONを返すコードの下部にfunctionなどがあります。

// within test code 
let movies = getMovieSearchJSON(); 
..... 
... 
... 
.... 
// way down below in the code 
function getMovieSearchJSON() { 
     return { 
     "Title": "Bri Squared", 
     "Year": "2011", 
     "Rated": "N/A", 
     "Released": "N/A", 
     "Runtime": "N/A", 
     "Genre": "Comedy", 
     "Director": "Joy Gohring", 
     "Writer": "Briana Lane", 
     "Actors": "Brianne Davis, Briana Lane, Jorge Garcia, Gabriel Tigerman", 
     "Plot": "N/A", 
     "Language": "English", 
     "Country": "USA", 
     "Awards": "N/A", 
     "Poster": "http://ia.media-imdb.com/images/M/MV5BMjEzNDUxMDI4OV5BMl5BanBnXkFtZTcwMjE2MzczNQ@@._V1_SX300.jpg", 
     "Metascore": "N/A", 
     "imdbRating": "8.2", 
     "imdbVotes": "5", 
     "imdbID": "tt1937109", 
     "Type": "movie", 
     "Response": "True" 
    } 
}