使用$ http從本地json文件獲取值的替代方法

我想從本地存儲的國家json文件加載國家/地區列表。我已經包含在index.html該文件爲：

<!-- Including Json --> 
<script src="json/countries.json"></script>

JSON文件被保存在名稱countries.json JSON文件夾，文件內容爲：

[ 
    { 
     "country_id":"1", 
     "country_name":"Afghanistan" 
    }, 
    { 
     "country_id":"2", 
     "country_name":"Albania" 
    }, 
    { 
     "country_id":"3", 
     "country_name":"Algeria" 
    }, 
    { 
     "country_id":"4", 
     "country_name":"American Samoa" 
    }, 
    { 
     "country_id":"5", 
     "country_name":"Andorra" 
    }, 
    { 
     "country_id":"6", 
     "country_name":"Angola" 
    }, 
    { 
     "country_id":"7", 
     "country_name":"Anguilla" 
    }, 
    { 
     "country_id":"8", 
     "country_name":"Antarctica" 
    }, 
    { 
     "country_id":"9", 
     "country_name":"Antigua and Barbuda" 
    }, 
    { 
     "country_id":"10", 
     "country_name":"Argentina" 
    }, 
    { 
     "country_id":"11", 
     "country_name":"Armenia" 
    }, 
    { 
     "country_id":"12", 
     "country_name":"Aruba" 
    }, 
    { 
     "country_id":"13", 
     "country_name":"Australia" 
    }, 
    { 
     "country_id":"14", 
     "country_name":"Austria" 
    }, 
    { 
     "country_id":"15", 
     "country_name":"Azerbaijan" 
    }, 
    { 
     "country_id":"16", 
     "country_name":"Bahamas" 
    }, 
    { 
     "country_id":"17", 
     "country_name":"Bahrain" 
    }, 
    { 
     "country_id":"18", 
     "country_name":"Bangladesh" 
    }, 
    { 
     "country_id":"19", 
     "country_name":"Barbados" 
    }, 
    { 
     "country_id":"20", 
     "country_name":"Belarus" 
    }, 
    { 
     "country_id":"21", 
     "country_name":"Belgium" 
    }, 
    { 
     "country_id":"22", 
     "country_name":"Belize" 
    }, 
    { 
     "country_id":"23", 
     "country_name":"Benin" 
    }, 
    { 
     "country_id":"24", 
     "country_name":"Bermuda" 
    } 
]

要僅舉幾個國家。

我能成功解析數據，並從我的控制器填充到UI指的角度的$htttp.get()服務的建議by @jaime：

 //Getting the base url inorder to tell app where to find countries json 
    var baseUrl = $location.absUrl().substring(0, $location.absUrl().indexOf('www')); 

        //Fetching the countries Json 
        return $http.get(baseUrl+'www/json/countries.json') 

        //On Fetching the countries lsit 
        .then(function(response){ 
         $scope.countryList = response.data; 
        });

它運作良好，這一點毋庸置疑。但是有沒有另外一種方法來實現這個功能？不使用$ http.get（）？我遇到了angular.fromJson()，但它不會解析文件路徑，因爲它需要它的參數纔是json對象。另外我遇到了使用jQuery的替代方案，如https://stackoverflow.com/a/12091134/1904479。有沒有其他的選擇不需要jQuery，而是使用角度或離子代碼？

來源

2016-03-09 Kailas

什麼是錯用'$ http.get'？ – dreamweiver

@dreamweiver沒什麼不對，只是很想知道除了http調用以外的其他選擇，也是爲什麼要去http調用的原因。 – Kailas

好吧，如果它始終是靜態數據，那麼你可以用硬編碼的json響應創建一個工廠方法並返回它。 'angular.module（ 'conciergeApp.services'） .factory（ 'CurrentUser'，函數（）{ 回報{ ID：1， HOTEL_ID：1， } }）;' – dreamweiver

其實，我們可以使用它，通過在常量宣佈其申報爲：

步驟1）創建一個文件constants.js並添加JSON對象到它：

var ConstantsCountries = [ 
     { 
      "country_id":"1", 
      "country_name":"Afghanistan" 
     }, 
     { 
      "country_id":"2", 
      "country_name":"Albania" 
     }, 
     { 
      "country_id":"3", 
      "country_name":"Algeria" 
     }, 
     { 
      "country_id":"4", 
      "country_name":"American Samoa" 
     }, 
     { 
      "country_id":"5", 
      "country_name":"Andorra" 
     }, 
     { 
      "country_id":"6", 
      "country_name":"Angola" 
     }, 
     { 
      "country_id":"7", 
      "country_name":"Anguilla" 
     }, 
     { 
      "country_id":"8", 
      "country_name":"Antarctica" 
     }, 
     { 
      "country_id":"9", 
      "country_name":"Antigua and Barbuda" 
     }, 
     { 
      "country_id":"10", 
      "country_name":"Argentina" 
     }, 
     { 
      "country_id":"11", 
      "country_name":"Armenia" 
     }, 
     { 
      "country_id":"12", 
      "country_name":"Aruba" 
     }, 
     { 
      "country_id":"13", 
      "country_name":"Australia" 
     }, 
     { 
      "country_id":"14", 
      "country_name":"Austria" 
     }, 
     { 
      "country_id":"15", 
      "country_name":"Azerbaijan" 
     }, 
     { 
      "country_id":"16", 
      "country_name":"Bahamas" 
     }, 
     { 
      "country_id":"17", 
      "country_name":"Bahrain" 
     }, 
     { 
      "country_id":"18", 
      "country_name":"Bangladesh" 
     }, 
     { 
      "country_id":"19", 
      "country_name":"Barbados" 
     } 
    ]

步驟2：包含在index.html如JS文件：

<!-----Constants Classes----> 
    <script src="Constants/Constants.js"></script>

第3步：用它在你的控制器：

.controller('CountriesCtrl', function ($localStorage,$rootScope,$location,$ionicLoading,$ionicHistory,$timeout) { 
    $scope.countries = ConstantsCountries; 
    console.log(angular.toJson($scope.countries)); 
}))

來源

2016-03-21 06:44:41 Kailas

爲什麼不使用角常量？因此，「全局變量（'ConstantsCountries'）是邪惡的」 – kazupooot

使用$ http從本地json文件獲取值的替代方法

回答

相關問題