Manipulate Angular.js $http response before displaying in view

Question

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.

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

}]);

Answer 1

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

Manipulate Angular.js $http response before displaying in view

Question

1 answers

solution1
0 2016-01-12 17:32:46

Manipulate Angular.js $http response before displaying in view

Question

1 answers

solution1 0 2016-01-12 17:32:46

solution1
0 2016-01-12 17:32:46