The Controller in Angular.js is initialized after the view is loaded

Question

The Controller in Angular.js is initialized after the view is loaded

I am facing an issue where I need to return the URL of each ID I receive, but the URL is being generated asynchronously. This delay in generation is causing a problem as I am unable to display it on the view immediately. How can I make the code wait until the data is fetched from PouchDB and the URL is generated?

controller

$scope.getColour = function(id) {
        var texture_array = [];
        texture_array = photoList.data.economy.concat(photoList.data.luxury, photoList.data.premium);
        var db = PouchDB('new_test4');
        var obj = {};
        var array = [];
        var i;
        
        for (i = 0; i < texture_array.length; i++) {
            
            if (texture_array[i].image_url == id) {
                db.getAttachment(id, id, function(err, blob_buffer) {
                    if (err) {
                        return console.log(err);
                    } else {
                        var url = URL.createObjectURL(blob_buffer);
                        console.log(url);
                        return url;
                    }
                });
            }

        }

    };

html

<div class="item" ng-repeat="photoOuterObj in remainingEconomyColour " ng-class=" $index? '' : 'active'">
    <div class="row" ng-repeat="photoInnerObj in photoOuterObj">
        <div class="premium-carousel-image">
            <a class="color-image"> <img src="{{getColour(photoInnerObj.image_url)}}" alt="Image" /></a>
            <div class="ambience-button">
            </div>
        </div>
    </div>
</div>

javascript angularjs asynchronous

Answer 1

Answer №1

Modify the getColor function to return a promise:

$scope.getColourPromise = function(id) {
    var texture_array = [];
    texture_array = photoList.data.economy.concat(photoList.data.luxury, photoList.data.premium);
    var db = PouchDB('new_test4');
    var obj = {};
    var array = [];
    var i;
     //Create deferred object
    var defer = $q.defer();
    // console.log(texture_array.length)
    for (i = 0; i < texture_array.length; i++) {
        //var id = texture_array[i].image_url;
        if (texture_array[i].image_url == id) {
            db.getAttachment(id, id, function handler(err, blob_buffer) {
                if (err) {
                    //return console.log(err);
                    //reject on error
                    defer.reject("db ERROR "+err);
                } else {
                    var url = URL.createObjectURL(blob_buffer);
                    console.log(url);
                    //resolve with url;
                    defer.resolve(url);
                }
            });
        }
    }
    //return promise
    return defer.promise;
};

The getAttachment method processes the getHandler function asynchronously after the completion of the getColour function, making it unable to return a value but capable of resolving a defer object.

Utilize ng-init to retrieve the url and attach it to the ng-repeat iterator object:

<div class="row" ng-repeat="innerObj in photoOuterObj">
    <!-- use ng-init to do the fetch -->
    <div ng-init="innerObj.urlObj = fetchURL(innerObj)">
        <a class="color-image"> <img ng-src="{{innerObj.urlObj.url}}" alt="Image" /></a>
        <div class="ambience-button">
        </div>
    </div>
</div>

The fetching function:

$scope.fetchURL = function(itemObj) {
    var urlObj = {};
    urlObj.url = "default.jpg";
    var promise = $scope.getColourPromise(itemObj.image_url);
    promise.then(function (url) {
        urlObj.url = url;
    });
    return urlObj;
});

Initially, the fetching returns an object with the url property set to a default value. Once the promise resolves, it will be updated to the fetched value. The watcher created by the double curly bracket {{ }} expression will refresh the DOM.

Avoid incorporating asynchronous functions within an interpolation like {{ }} as they are invoked multiple times per digest cycle.

Answer 2

Modify the getColor function to return a promise:

$scope.getColourPromise = function(id) {
    var texture_array = [];
    texture_array = photoList.data.economy.concat(photoList.data.luxury, photoList.data.premium);
    var db = PouchDB('new_test4');
    var obj = {};
    var array = [];
    var i;
     //Create deferred object
    var defer = $q.defer();
    // console.log(texture_array.length)
    for (i = 0; i < texture_array.length; i++) {
        //var id = texture_array[i].image_url;
        if (texture_array[i].image_url == id) {
            db.getAttachment(id, id, function handler(err, blob_buffer) {
                if (err) {
                    //return console.log(err);
                    //reject on error
                    defer.reject("db ERROR "+err);
                } else {
                    var url = URL.createObjectURL(blob_buffer);
                    console.log(url);
                    //resolve with url;
                    defer.resolve(url);
                }
            });
        }
    }
    //return promise
    return defer.promise;
};

The getAttachment method processes the getHandler function asynchronously after the completion of the getColour function, making it unable to return a value but capable of resolving a defer object.

Utilize ng-init to retrieve the url and attach it to the ng-repeat iterator object:

<div class="row" ng-repeat="innerObj in photoOuterObj">
    <!-- use ng-init to do the fetch -->
    <div ng-init="innerObj.urlObj = fetchURL(innerObj)">
        <a class="color-image"> <img ng-src="{{innerObj.urlObj.url}}" alt="Image" /></a>
        <div class="ambience-button">
        </div>
    </div>
</div>

The fetching function:

$scope.fetchURL = function(itemObj) {
    var urlObj = {};
    urlObj.url = "default.jpg";
    var promise = $scope.getColourPromise(itemObj.image_url);
    promise.then(function (url) {
        urlObj.url = url;
    });
    return urlObj;
});

Initially, the fetching returns an object with the url property set to a default value. Once the promise resolves, it will be updated to the fetched value. The watcher created by the double curly bracket {{ }} expression will refresh the DOM.

Avoid incorporating asynchronous functions within an interpolation like {{ }} as they are invoked multiple times per digest cycle.

The Controller in Angular.js is initialized after the view is loaded

Answer №1

Similar questions

Enhance jQuery event handling by adding a new event handler to an existing click event

Bing Map problem: p_elSource.attachEvent is throwing an error

How about using take(1) in conjunction with an Observable<boolean>?

Issue with this.setState() not updating value despite not being related to asynchronous updates

What is the best way to pause and wait for the user's click event in testing-library React until the state is updated?

What steps should I take to correct the color selection of a button that has been pressed down

Creating a layered structure in React using custom components within the Material-UI tree

The map fails to load on the HTML page

I'm encountering a problem with my vuejs application

Enhance Your Search Functionality with an Angular Pipe

Error Code 18: Unable to Open Database - Troubleshooting in AngularJS and Cordova

The sole focus is on the animation within the div

Having an issue with my Django model not properly saving data when receiving a POST

Conceal and reveal text with a simple user click

What is the best way to manage json-parse errors in a node.js environment?

Disabling the 'fixed navigation bar' feature for mobile devices

Adjust tool tip text on the fly

Question: How come I am receiving the error message "TypeError: Cannot read property 'toLowerCase' of undefined" in React JS?

Looking to dynamically assign a value to ngModel that comes from user input in Angular version 4

Angular Select Menu Issue: Unusual Dropdown Positioning in Internet Explorer