Optimization of AngularJS function to load images on the page

Question

I have two AngularJS function in my dataContext object that receive data from a WebAPI:

(function () {
'use strict';

var serviceId = 'datacontext';
angular.module('app').factory(serviceId,
    ['common', datacontext]);

function datacontext(common) {
    var service = {

        getAllTagsByHttp: getAllTagsByHttp,
        getBlogPostsByHttp: getBlogPostsByHttp,
        getAllUserPicByHttp: getAllUserPicByHttp

    };
    return service;

    function getAllTagsByHttp() {
       return common.$http.get('/api/TagApi/alltags');         
    }

    function getBlogPostsByHttp() {
        return common.$http.get('/api/BlogPostApi/AllBlogPosts');
    }

    function getAllUserPicByHttp() {
        return common.$http.get('/api/BlogPostApi/AllUserPic');
    }   
}})();

I have an AngularJS controller that calls these API functions from the datacontext to receive information to display back to the user. The getblogPost function is called first because the next function needs the data from this to operate on. The second function does a comparison on the first function's data to display back the img source to the user.

The problem I am having is that it takes quite a few seconds for the second function to receive the data and complete its operation. The amount of data being send back is a few records. Is there any improvements that can be made to the controller or dataContext object to reduce the time or improve the code?

(function () {
'use strict';
var controllerId = 'search';
angular
    .module('app')
    .controller(controllerId, ['common','datacontext', search]);

function search(common, datacontext) {
    var getLogFn = common.logger.getLogFn;
    var log = getLogFn(controllerId);


    var vm = this;
    vm.title = 'search';
    vm.picData = [];

    activate();

    function activate() {
        var promises = [getBlogPosts(), getUserPicData(), getUserPicUrl()];
        common.activateController(promises, controllerId)
            .then(function () { log('Search View'); });
    }

    function getBlogPosts() {
        datacontext.getBlogPostsByHttp().then(function (response) {
            vm.data = response.data;               
        });
    }
    function getUserPicData() {
        datacontext.getAllUserPicByHttp().then(function (response) {
            vm.picData = response.data;

            for (var i = 0; vm.data.length > i; i++) {
                for (var x = 0; vm.picData.length > x; x++) {
                    if (vm.data[i].UserName == vm.picData[x].UserName) {
                        vm.data[i].PictureUrl = vm.picData[x].PictureUrl;
                       // console.log(vm.data[i].PictureUrl);
                        break;
                    }

                }                   
           }
        });
    }

   function getUserPicUrl(username) {
        getUserPicData();
        for (var i = 0; vm.picData.length < i; i++) {
            if (vm.picData[i].UserName === username) {
                return vm.picData[i].PictureUrl;
                }
            }
            return "not found";      
    }
}})();

Answer 1

Personally, I would create a 4th service that returns all data in 1 go and be done with it.

Other than, I would return the array in the first block immediately. Secondly, I would probably go for object notation for something that simple:

function datacontext(common) {
    return {
        getAllTagsByHttp: function getAllTagsByHttp() {
          return common.$http.get('/api/TagApi/alltags');         
        },
        getBlogPostsByHttp: function getBlogPostsByHttp() {
          return common.$http.get('/api/BlogPostApi/AllBlogPosts');
        },
        getAllUserPicByHttp:     function getAllUserPicByHttp() {
          return common.$http.get('/api/BlogPostApi/AllUserPic');
        }
    };
}

Furthemore, for this part: The problem i am having is that it takes quite a few seconds for the second function to receive the data and an complete its operation. You really should use the Chrome Developer Tools (or their Firefox counterpart) and figure out what is taking so long ? ( Latency, server side processing, or JavaScript processing ). If the problem is on the server side then it makes even more sense to have only 1 API call (that's what Netflix does)