使用$ http

时间:2016-03-09 07:08:10

标签: javascript jquery angularjs json ionic-framework

我想从本地存储的国家/地区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中,引用建议by @jaime $htttp.get()角度的 //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; }); 服务:

   public override bool OnKeyDown(Keycode HWkeyCode, KeyEvent e)
    {
        if (HWkeyCode == Keycode.Back)
        {
            StartActivity(typeof(FrontPageActivity));
            return true;
        }
        return false;
    }

它运作良好,毫无疑问。但是有另一种方法可以实现这个功能吗?不使用$ http.get()?我来到angular.fromJson(),但它不会解析文件路径,因为它需要它的参数是一个json对象。另外,我在https://stackoverflow.com/a/12091134/1904479中使用了jquery。有没有其他替代品不需要jquery,而是使用角度或离子代码?

1 个答案:

答案 0 :(得分:2)

实际上,我们可以通过在常量文件中将其声明为:

来使用它

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