AngularJS Iterate über Ajax zurückgegebenes Objekt

Question

Ich schreibe ein Programm, um AngularJS zu lernen. Dieses Programm hat eine ajax Funktion, die ein Objekt von einem API-Endpunkt zurückkehrt, wie folgt:

$.ajax(
    { 
    url: "/api/request.json", 
    dataType: "json", 
    statusCode: { 
     404: function(){ 
     console.log("Error 404"); 
     } 
    }, 
    success: function(data){ 
     console.log("Successfully copied data to meteo_values"); 
     fn(data); // do something with the data 
    }, 
    error: function(err){ 
     console.log(err); 
    } 
    } 
); 

möchte ich durch das Objekt zu durchlaufen, die mit AngularJS zurückgeführt wird. Im Moment bin ich mit jQuery die Daten in einem div zu injizieren, etwa so:

function fn(val){ 
    // populate the webpage with the values 

    var data_table = "<div class='data_table'><p>" + datetext + "</p>"; 
    // iterate through val array 
    for (var value in val){ 

    data_table += "<div class='card'><h2>" + val[value]["city"] + "</h2>"; 
    data_table += "<table><tr><th>Orario</th><th>Temperatura</th><th>Umidità</th></tr>"; 
    data_table += "<tr><td>" + val[value]["t1"]["ora"] + "</td><td>" + val[value]["t1"]["temperatura"] + "</td><td>" + val[value]["t1"]["humidity"] + "</td></tr>"; 
    data_table += "<tr><td>" + val[value]["t2"]["ora"] + "</td><td>" + val[value]["t2"]["temperatura"] + "</td><td>" + val[value]["t2"]["humidity"] + "</td></tr>"; 
    data_table += "<tr><td>" + val[value]["t3"]["ora"] + "</td><td>" + val[value]["t3"]["temperatura"] + "</td><td>" + val[value]["t3"]["humidity"] + "</td></tr>"; 
    data_table += "</table></div>"; 
    } 
    data_table += "</div>" 
    $(".results").append(data_table); 
} 

Statt das zu tun (was funktioniert, aber es ist nicht elegant erscheinen), ich möchte AngularJS verwenden. Ich habe versucht, ng-repeat, aber es hat nicht geklappt. Beachten Sie, dass das zurückgegebene Objekt ein Objekt ist, das ein Array von n Objekten enthält, die auch einen weiteren Satz von drei Objekten enthalten.

Ich habe bereits versucht ng-repeat="(key,value) for name_of_the_variable_in_the_$scope"

Ich habe nützliche Informationen vergessen haben, könnten Sie mir zu helfen und beantworten und ich für die Antwort schon gesucht, aber ich fand es nicht.

EDIT:

var meteoApp = angular.module('meteoapp', []); 

meteoApp.controller('meteoPopulateCtrl', function ($scope) { 

    $scope.data = []; 

    $.ajax(
    { 
     url: "/api/request.json", 
     dataType: "json", 
     statusCode: { 
     404: function(){ 
      console.log("Error 404"); 
     } 
     }, 
     success: function(data){ 
     $scope.data = data; 
     }, 
     error: function(err){ 
     console.log(err); 
     } 
    } 
); 

HTML MARKUP

<div ng-app="meteoapp"> 
    <div ng-controller="meteoPopulateCtrl"> 
    <div class="results" ng-repeat="???"> 
     something that is repeated 
    </div> 
    </div> 
</div> 

zurückgegebene Objekt (To prettified sein)

[ 
    { 
    "city":"a city", 
    "t1": 
    { 
     "ora":"01", 
    "temperatura":"7.2°", 
    "humidity":"92%"}, 
    "t2": 
    { 
     "ora":"04", 
     "temperatura":"7.1°", 
     "humidity":"93%"}, 
    "t3": 
    { 
     "ora":"07", 
     "temperatura":"7.4°", 
     "humidity":"94%" 
    } 
}] 

Answer 1

Wenn Ihr Code in AngularJS ist, sollten Sie ng-repeat verwenden dafür Anzeigen auf der HTML-Seite. Hier

ist das grundlegende Beispiel ng-repeat:

HTML:

<h3>FIFA Mactch Summary:</h3> 
<div ng-app ng-controller="MyCtrl"> 
    <ul> 
     <li ng-repeat="(country,goals) in items">{{country}}: {{goals}}</li> 
    </ul> 
</div> 

Javascript:

var m = { 
    "India": "2", 
    "England": "2", 
    "Brazil": "3", 
    "UK": "1", 
    "USA": "3", 
    "Syria": "2" 
}; 

function MyCtrl($scope) { 
    $scope.items = m; 
} 

Working example

Für Ajax-Request sollten Sie verwenden $http weil $http callbacks are all wrapped in $scope.$apply(). Sonst müssen Sie $ scope anrufen. $ Apply() die $ scope. $ Digest() für Sie aufrufen wird.

Answer 2

ng-repeat wird den Job erledigen - Sie müssen daran denken, den Bereich zu aktualisieren, bevor asynchron geladene Inhalte angezeigt werden. Versuchen Sie $scope.$apply() nach Erhalt der Antwort und die ng-repeat sollte es abholen.

Hoffe, das hilft.