如何從$ http獲取數組並使用ng-repeat查看

我想從返回函數中獲取JSON對象數組，並使用ng-repeat在此數組中循環，但它不適用於我，這是我的代碼：

var app=angular.module("myApp",[]); 

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

    $scope.listOfFields=[]; 

$scope.getlistOfFieldsByIdTable = function(idTable) 
    { 
     $http.get("/listOfFieldsByIdTable/"+idTable) 
     .success(function(data){ 

     return data; 

     }); 
    }; 

}); 

<!-- first call --> 
<!-- 150 is the id of the table--> 
<div class="panel-body" ng-app="myApp" ng-controller="myController"> 

    <ul ng-init="listOfFields = getlistOfFieldsByIdTable(150)"> 
     <li ng-repeat="field in listOfFields "> 
       {{field.name}} 
     </li> 
    </ul>       
</div> 

<!-- second call --> 

<div class="panel-body" ng-app="myApp" ng-controller="myController"> 
    <ul> 
     <lib ng-repeat="field in getlistOfFieldsByIdTable(150)"> 
         {{field.name}} 
     </li> 
    </ul> 
</div>

，我使用的不是爲我工作了兩個電話，當我用像「谷歌瀏覽器高級REST客戶端插件」一RESTClient實現我的服務工作正常，你可以幫我如何正確地調用我的數組對象，並在我的HTML頁面中顯示結果，感謝先進。

來源

2016-04-03 James

將您的結果記錄在您的獲取功能中。你有什麼收穫？ –

嗨@JeremyJackson感謝您的回覆，是的，我用了一個函數（error）{ console.log（'something went wrong'）; }）;但我沒有得到任何錯誤的功能，我的問題在我的HTML頁面呈現結果的方式:( – James

這很好，但嘗試記錄你回來的迴應，而不僅僅是一個錯誤。只是想確保您實際上正在獲取數據以進行渲染，並且嘗試在控制檯中調用該函數，並查看是否還有任何東西。 –

問題出在getlistOfFieldsByIdTable功能：

//WRONG 
    $scope.getlistOfFieldsByIdTable = function(idTable) 
     { 
      $http.get("/listOfFieldsByIdTable/"+idTable) 
      .success(function(data){ 

      return data; 
      }); 
     };

return data語句將數據返回給.success方法中的匿名函數。它不會將數據返回到父函數。由於沒有在父級別指定返回，因此返回的值爲null。需要在嵌套的每個級別完成回報。

//BETTER 
$scope.getlistOfFieldsByIdTablePromise = function(idTable) { 

    var promise = $http.get("/listOfFieldsByIdTable/"+idTable); 

    var derivedPromise = promise.then(function onfulFilled(response) { 
     var data = response.data; 
     //Sets scope value asynchronously 
     $scope.listOfFieldsByIdTable = data; 
     //return value creates derived promise 
     return data; 
    }; 

    return derivedPromise; 
};

在這個例子中有一個return聲明在每一個嵌套的水平，但最終的項目返回的不是值;這是一個承諾。

$http服務只返回承諾。附加到承諾對象的方法只返回承諾。數據僅作爲一種副作用出現，並且在XHR完成時將來發生。

在我的NG-重複，我應該使用您在返回函數中使用listOfFieldsByIdTable或derivedPromise？

在ng-repeat指令中使用$scope.listOfFieldsByIdTable變量。 ng-repeat指令在變量上放置一個$watch，該變量檢查每個摘要週期的更改，以及數據何時出現（或更改），它會更新DOM。

要做的額外處理的數據在控制器中，鏈從派生諾言。

來源

2016-04-03 16:32:32 georgeawg

感謝您的時間和你的迴應，我有一個問題，關於你的例子，在我的ng-repeat，我應該使用l在返回函數中使用istOfFieldsByIdTable或derivedPromise？先進的感謝 – James

使用'$ scope.listOfFieldsByIdTable'。請參閱更新以瞭解更多解釋。 – georgeawg

非常感謝你，它對我有用 – James

當你執行一些異步操作，你不能回報數據，所以你必須涉及回調和/或承諾。

例如，我們可以創建一個服務，一個方法，該方法返回一個承諾：

function Service($http) { 

     this.getData =() => { 
     return new Promise((resolve, reject) => { 
      setTimeout(() => { 
      resolve([1,2,3,4,5]); 
      }, 1000); 
     }); 
     } 

    }

然後在這樣的控制器使用此服務：

function Controller($scope, Service) { 

    //Initialize our list 
    $scope.list = []; 

    //Call our promise 
    Service.getData().then((response) => { 
     //After 1s, retrieve the data 
     $scope.list = response 
     //Update the bindings 
     $scope.$apply(); 
    }); 

    }

你可以看到Working Plunker

來源

2016-04-03 16:12:46

嘿@Paul Boutes感謝您的解釋（y） – James

如何從$ http獲取數組並使用ng-repeat查看

回答

相關問題