AngularJS迭代阿賈克斯返回對象

我正在寫一個程序來學習AngularJS。這個方案有一個Ajax功能從API端點返回一個對象，像這樣：AngularJS迭代阿賈克斯返回對象

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

我想通過使用AngularJS返回的對象進行迭代。現在，我使用jQuery注入數據的DIV中，像這樣：

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

而是這樣做的（它的工作原理，但它似乎不優雅），我想用AngularJS。我嘗試使用ng-repeat，但沒有成功。請考慮返回的對象是一個包含n個對象的數組的對象，該對象還包含另一組三個對象。

我已經嘗試過ng-repeat="(key,value) for name_of_the_variable_in_the_$scope"

我可能已經忘記了有用的信息，爲您幫我回答，我已經搜索的答案，但我沒有找到它。

編輯：

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標記

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

返回的對象（爲了美化）

[ 
    { 
    "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%" 
    } 
}]

來源

2016-12-19 mnemosdev

你可以發佈你用來測試的角度控制器和html代碼嗎？ –

這似乎是[ng-repeat]的一個**非常基本的用法（https://docs.angularjs.org/api/ng/directive/ngRepeat）**。 – Mistalis

^^^^ +使用'$ http（）'而不是'$ .ajax（）' – Satpal

如果你的代碼是在angularjs，你應該使用ng-repeat顯示它在html頁面上。

這裏是NG重複的簡單的例子：

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

對於Ajax請求，你應該使用$http，因爲$http callbacks are all wrapped in $scope.$apply()。否則您需要撥打$ scope。$ apply（）這將爲您調用$ scope。$ digest（）。

來源

2016-12-19 12:51:36

ng-repeat將完成這項工作 - 您需要記住刷新範圍之前將顯示異步加載的內容。收到回覆後請嘗試$scope.$apply()，ng-repeat應該提取。

希望這會有所幫助。

來源

2016-12-19 12:52:24

AngularJS迭代阿賈克斯返回對象

回答

相關問題