I am a newbie to AngularJs world - I am trying to get data from two REST WS calls.
First one returns a set of data (works fine)- using the value of data from frist one I need to make another webservice call and retrive the data and print in a table.
Below is what I have tried so far: HTML:
<table ng-table="tableParams" id="request_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Number</th>
<th>Price</th>
<th>Short Description</th>
<th>Requested for</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="request in req_list | orderBy:sortType:sortReverse | filter: searchItem">
<p ng-repeat="item in fetchRequest(request.price)"></p>
<td>{{request.number }}</td>
<td>{{request.price}}</td>
<td>{{request.short_description}}</td>
<td>{{request.requested_for.display_value}}</td>
<td>{{request.stage}}</td>
</tr>
</tbody>
Script:
angular.module('sc_request_list')
.controller('MyRequestItems', [
'$scope',
'$http',
function($scope, $http) {
$scope.sortType = 'number' //set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchItem // set the default search/filter term
$scope.itemUrl = '/api/sc_request';
$scope.reqUrl = '/api/sc_req_item';
$http.defaults.headers.common.Accept = "application/json";
$scope.fetchRequestItemList = function() {
$http({
method: 'GET',
url: $scope.itemUrl,
}).
success(function(data, status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
$scope.req_list = data.result; // response data
}).
error(function(data, status) {
$scope.req_list = [{
"req_list": "Error fetching list"
}];
});
}
$scope.fetchRequest = function(request) {
console.log("Request Number is: " + request);
$http({
method: 'GET',
url: $scope.reqUrl + "/" + request,
}).
success(function(data, status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
$scope.req = data.result; // response data
}).
error(function(data, status) {
$scope.req = [{
"req": "Error fetching list"
}];
});
}
}
]);
Any help much appreaciated.
Your calls are made asynchronously so while the calls are being made, the rest of the code is still executing. Thus,
<p ng-repeat="item in fetchRequest(request.price)"></p>
is executed before request.price is even defined.
What you need to do is chain the calls to your api calls:
$http({
method: 'GET',
url: $scope.itemUrl,
}).
success(function(data, status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
$scope.req_list = data.result; // response data
//Loop through requests
$scope.req_list.foreach(function (elem, index) {
//chained call is here
$scope.fetchRequest(elem.price, index);
});
}).
error(function(data, status) {
$scope.req_list = [{
"req_list": "Error fetching list"
}];
});
$scope.fetchRequest = function(request, index) {
console.log("Request Number is: " + request);
$http({
method: 'GET',
url: $scope.reqUrl + "/" + request,
}).
success(function(data, status) {
var result = data;
var json = JSON.stringify(result);
var data = JSON.parse(json);
//Attach result of api call to apropriate element of req_list array
$scope.req_list[index].items = data;
}).
error(function(data, status) {
$scope.req = [{
"req": "Error fetching list"
}];
});
}
}And then change:
<p ng-repeat="item in fetchRequest(request.price)"></p>
To:
<p ng-repeat="item in request.items"></p>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments