angularjsでhttpを使用してjsonからデータを取得する方法

私は国のJSONファイルを持っていますが、今はコンソールでデータを取得しますが、htmlファイルでは表示されません。コンソールに表示されますが、htmlファイルには印刷されません。それで、私はどのように私のhtmlファイルのデータを呼び出すことができます。、 { "名"：「オーランド諸島 angularjsでhttpを使用してjsonからデータを取得する方法

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）。

それはすでに立っているとして、あなたのHTMLで動作するはず

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

：

<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

angularjsでhttpを使用してjsonからデータを取得する方法

答えて

関連する問題