如何从json中使用http获取数据在angularjs中

我有一个国家的JSON文件，现在我在控制台中获取数据，但它没有打印在html文件中。它显示在控制台中，但在html文件中没有打印。所以我可以在我的html文件中调用数据。如何从json中使用http获取数据在angularjs中

var app = angular.module("myApp", []); 
 
      
 
app.controller('myController', function($scope,$http) { 
 
    $http.get(".../../assets/json/country.json"). 
 
     then(function(data){ 
 
      var countryData = data; 
 
    var conData = countryData.data; 
 
    for(var i=0; i<conData.length; i++){ 
 
     $scope.countries = conData[i]; 
 
\t console.log($scope.countries.name+ " " +$scope.countries.code); 
 
    } \t \t \t \t 
 
     }) 
 
    });

<html> 
 
    
 
    <head> 
 
     <title>Angular JS Controller</title> 
 
     <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <div ng-app="myApp" ng-controller="myController"> 
 
     <div ng-repeat="country in countries"> 
 
     {{country.code}} 
 
     {{country.name}} 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

这是我country.json文件输入代码在这里 [ { “名”： “阿富汗”， “代码”： “AF” }，{ “名”：“奥兰群岛 “ ”代码“： ”AX“ }， { ”名“： ”阿尔巴尼亚“， ”代码“： ”AL“ }， { ”名“： ”阿尔及利亚“， ” 代码“：”DZ“ }]

来源

2017-09-13 ns093

现在您已注入$http服务到控制器中，我已经更新了我的答案...

我已经改变了你的回调代码咯，最重要的变化是指$scope.countries到成功回调参数的data属性（在下面的代码中为obj）。

app.controller('myController', function($scope,$http) { 

    $http.get(".../../assets/json/country.json").then(getCountriesSuccess); 

    function getCountriesSuccess(obj){ 

    $scope.countries = obj.data; // <--- This is the important line here! 

    $scope.countries.forEach(function(country){ 
     console.log(country.name + " " + country.code); 
    });    
    } 
});

这应该与你的HTML工作，因为它已经表示：

<div ng-app="myApp" ng-controller="myController"> 
    <div ng-repeat="country in countries"> 
    {{country.code}} 
    {{country.name}} 
    </div> 
</div>

来源

2017-09-13 16:00:22

我已经加入了$ http和还得到在控制台中的数据，但在HTML它不工作 – ns093

@ ns093我已经更新答案。我已经稍微更改了代码，希望它更简洁一点。 –

我得到了答案，如果我们在html中使用这样的话，那么它的工作，

。这是工作100％ – ns093

如何从json中使用http获取数据在angularjs中

回答

相关问题