HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Simple AngularJS controller for REST API

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
restangularjssimplecontrollerforapi

Problem

We record software builds from our build machine into a database and for practice purposes I'm building a little web dashboard for it.

The API is REST (WebApi) and provides access to query for Products, Branches, Profiles and specific Builds.

The controller queries all products (each product contains a list of branches and profiles it has been build for) as well as all branches and profiles anything was ever built for.

It then goes on to query the last 10 builds for each of the branches and profiles a product was built for.

This is my first attempt at anything related to web-programming so I thought I'll get someone to look at it. Here is the code:

```
(function (angular) {
var app = angular.module("app", ["ngResource"]);

app.factory("Product", ["$resource", function ($resource) {
return $resource("/api/Product");
}]);

app.factory("Build", ["$resource", function ($resource) {
return $resource("/api/Build");
}]);

app.factory("BasicResource", ["$q", "$http", function ($q, $http) {
var resourceFactory = {
async: function(type) {
var d = $q.defer();
var result = $http.get("/api/" + type).success(function() {
d.resolve(result);
});
return d.promise;
}
};
return resourceFactory;
}]);

app.controller("MainCtrl", ["$rootScope", "$scope", "$q", "$http", "BasicResource", "Product", "Build", function ($rootScope, $scope, $q, $http, BasicResource, Product, Build) {
$rootScope.title = "Build Dashboard";
$scope.Builds = [];

$q.all([
Product.query().$promise,
BasicResource.async("Branch"),
BasicResource.async("Profile")
]).then(function(data) {
$scope.Products = data[0];
$scope.Branches = data[1].data;
$scope.Profiles = data[2].data;
}).then(function() {

var allBuildQuerie

Solution

-
You can use this unexplodeWord function:

var explodedWords = [{"0":"h","1":"e","2":"l","3":"l","4":"o"},    
                       {"0":"w","1":"o","2":"r","3":"l","4":"d"}]

 var words = explodedWords.map(unexplodeWord);

 // Converts {"0":"h","1":"e"} to "he".
 function unexplodeWord(explodedWord) {
   var chars = [];
   angular.forEach(explodedWord, function(char) { 
     chars.push(char);
   });
   return chars.join('');
 }

 words.forEach(function(item) { console.log("word: " + JSON.stringify(item)); });


You would call it as such:

$scope.Products = data[0];
    $scope.Branches = data[1].map(unexplodeWord);
    $scope.Profiles = data[2].map(unexplodeWord);


You would still have some asymmetry relative to Products, but not as much.

-
If I understand correctly, you want some kind of advice about pagination. If you really get too much data, maybe you could print only the branches and profiles for one product at a time.

If you have too many branches and profiles for a single product, you should probably only output either branches or profiles, and paginate those.

Code Snippets

var explodedWords = [{"0":"h","1":"e","2":"l","3":"l","4":"o"},    
                       {"0":"w","1":"o","2":"r","3":"l","4":"d"}]

 var words = explodedWords.map(unexplodeWord);

 // Converts {"0":"h","1":"e"} to "he".
 function unexplodeWord(explodedWord) {
   var chars = [];
   angular.forEach(explodedWord, function(char) { 
     chars.push(char);
   });
   return chars.join('');
 }

 words.forEach(function(item) { console.log("word: " + JSON.stringify(item)); });
$scope.Products = data[0];
    $scope.Branches = data[1].map(unexplodeWord);
    $scope.Profiles = data[2].map(unexplodeWord);

Context

StackExchange Code Review Q#57548, answer score: 2

Revisions (0)

No revisions yet.