AngularJS：工廠$ 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工作。 但是，現在我已經用$ http.get代碼替換了JSON，它不起作用。 我已經看到了很多不同的$ http和$資源的例子，但不知道該去哪里。 我正在尋找最簡單的解決方案。 我只是想為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）如果您沒有運行任何類型的網絡服務器並且僅使用file：//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

我想說明接受答案的第四部分是錯誤的 。

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

上面的代碼@Karl Zilles寫的將失敗，因為obj將始終在接收數據之前返回（因此值將始終為null ），這是因為我們正在進行異步調用。

本文將討論類似問題的詳細信息

---

在Angular中，當您想要進行異步調用時，使用$promise處理獲取的數據。

最簡單的版本是

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的原因是我剛剛從doc中發現，這兩種方法都被棄用了。

$http遺留承諾方法成功和錯誤已被棄用。 使用標准then方法來代替。

Answer 3

這個答案幫助了我很多，並指出了我正確的方向，但對我有用的，希望其他人，是：

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 4

我有大約這些問題。 我需要從Visual Studio 2013調試AngularJs應用程序。

默認情況下，IIS Express限制訪問本地文件（如json）。

但是，首先：JSON具有JavaScript語法。

第二：允許使用javascript文件。

所以：

1. 將JSON重命名為JS（ data.json->data.js ）。

2. 正確的加載命令（ $http.get('App/data.js').success(function (data) {...

3. 將腳本data.js加載到頁面（ <script src="App/data.js"></script> ）

接下來以常規方式使用加載數據。 當然，這只是解決方法。

Answer 5

++這對我有用。 它是vanilla javascirpt ，適用於使用ngMocks庫測試時的去雜亂等用例：

<!-- 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數據的javascript文件

// 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"
};

最后，在代碼中的任何位置使用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

對我來說更簡單的方法就是在代碼底部包含一個function ，返回任何JSON 。

// 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"
   }
}