I’m attempting to manipulate $http response data before displaying it in the view, but since the $http call is asynchronous I believe that the $scope variables are getting set before the response is returned. Apart from not displaying the data, the server crashes with each call.
我试图在视图中显示$ http响应数据之前对其进行操作,但由于$ http调用是异步的,我认为$ scope变量在返回响应之前已经设置好。除了不显示数据外,服务器在每次调用时都会崩溃。
What I’m attempting to do with the data/response, is to split it into four and create four columns in the view—each containing a quarter of the data. Is this something that needs to happen in a service or in some other fashion?
我试图对数据/响应做的是将其拆分为四个并在视图中创建四列 - 每列包含四分之一的数据。这是需要在服务中还是以其他方式发生的事情?
Any help would be greatly appreciated!
任何帮助将不胜感激!
<!DOCTYPE html>
<html ng-app="stylingCampersStories" ng-controller="CamperNewsController">
<head>
<title>Camper News </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mystyles.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-repeat="(key, value) in columnOne" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
<div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
{{value.author.username}}
</div>
<div class="bottomBox"></div>
</div>
<div ng-repeat="(key, value) in columnTwo" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
<div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
{{value.author.username}}
</div>
<div class="bottomBox"></div>
</div>
<div ng-repeat="(key, value) in columnThree" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
<div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
{{value.author.username}}
</div>
<div class="bottomBox"></div>
</div>
<div ng-repeat="(key, value) in columnFour" class="outerContainer" class="col-lg-3 col-md-3 col-sm-3">
<div ng-style="{'background-image': 'url({{value.author.picture}})'}" class="postersPhoto">
{{value.author.username}}
</div>
<div class="bottomBox"></div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="controllers/CamperNewsController.js" type="text/javascript"></script>
</body>
angular.module("stylingCampersStories", []).controller('CamperNewsController', ['$scope','$http',
function($scope, $http) {
$scope.columnOne = [];
$scope.columnTwo = [];
$scope.columnThree = [];
$scope.columnFour = [];
$http({
method: 'GET',
url: 'http://www.freecodecamp.com/news/hot'
}).then(function successCallback(response) {
var oneQuarter = response.data.length / 4;
var oneHalf = response.data.length / 2;
var threeQuarters = response.data.length / 1.333;
for(var i = 0; i < oneQuarter; i++) {
while ( i < response.data.length / 4) {
$scope.columnOne.push(response.data[i]);
}
while (i > oneQuarter && i < oneHalf) {
$scope.columnTwo.push(response.data[i]);
}
while (i > oneHalf && i < threeQuarters) {
$scope.columnThree.push(response.data[i]);
}
while (i > threeQuarters) {
$scope.columnFour.push(resposne.data[i]);
}
}
}, function errorCallback(response) {
console.log(response);
});
}]);
1 个解决方案
#1
0
Try this. Instead of changing the scope variable directly you can push values to another variable and assign to scope variable once everything is done.
试试这个。您可以将值推送到另一个变量,并在完成所有操作后分配给范围变量,而不是直接更改范围变量。
angular.module("stylingCampersStories", []).controller('CamperNewsController', ['$scope','$http',
function($scope, $http) {
$scope.columnOne = [];
$scope.columnTwo = [];
$scope.columnThree = [];
$scope.columnFour = [];
$http({
method: 'GET',
url: 'http://www.freecodecamp.com/news/hot'
}).then(function successCallback(response) {
var oneQuarter = response.data.length / 4,
oneHalf = response.data.length / 2,
threeQuarters = response.data.length / 1.333,
col1 = [],
col2 = [],
col3 = [],
col4 = [];
for(var i = 0; i < oneQuarter; i++) {
while ( i < response.data.length / 4) {
col1.push(response.data[i]);
}
while (i > oneQuarter && i < oneHalf) {
col2.push(response.data[i]);
}
while (i > oneHalf && i < threeQuarters) {
col3.push(response.data[i]);
}
while (i > threeQuarters) {
col4.push(resposne.data[i]);
}
}
$scope.columnOne = col1;
$scope.columnTwo = col2;
$scope.columnThree = col3;
$scope.columnFour = col4;
}, function errorCallback(response) {
console.log(response);
});
}]);
#1
0
Try this. Instead of changing the scope variable directly you can push values to another variable and assign to scope variable once everything is done.
试试这个。您可以将值推送到另一个变量,并在完成所有操作后分配给范围变量,而不是直接更改范围变量。
angular.module("stylingCampersStories", []).controller('CamperNewsController', ['$scope','$http',
function($scope, $http) {
$scope.columnOne = [];
$scope.columnTwo = [];
$scope.columnThree = [];
$scope.columnFour = [];
$http({
method: 'GET',
url: 'http://www.freecodecamp.com/news/hot'
}).then(function successCallback(response) {
var oneQuarter = response.data.length / 4,
oneHalf = response.data.length / 2,
threeQuarters = response.data.length / 1.333,
col1 = [],
col2 = [],
col3 = [],
col4 = [];
for(var i = 0; i < oneQuarter; i++) {
while ( i < response.data.length / 4) {
col1.push(response.data[i]);
}
while (i > oneQuarter && i < oneHalf) {
col2.push(response.data[i]);
}
while (i > oneHalf && i < threeQuarters) {
col3.push(response.data[i]);
}
while (i > threeQuarters) {
col4.push(resposne.data[i]);
}
}
$scope.columnOne = col1;
$scope.columnTwo = col2;
$scope.columnThree = col3;
$scope.columnFour = col4;
}, function errorCallback(response) {
console.log(response);
});
}]);