What is the best method to utilize a promise to delay the execution of a function until the data is received and stored

Question

What is the best method to utilize a promise to delay the execution of a function until the data is received and stored

Currently, I am facing an issue with my API where the model variable is returning undefined before any data is populated in the return_array.

I am unsure of how to implement promises or another method to ensure that the variable waits for data to be filled correctly, without resorting to using a less-than-ideal $timeout hack.

The problem can be seen here in the chrome inspector (ticker_chart = undefined):

https://i.sstatic.net/0x4JH.png

In this scenario, I require ticker_chart to hold off until it receives a value.

The initial function responsible for calling out to a service to retrieve the ticker quote data:

function renderChart(ticker, limit) {
    ticker_chart = TickerChartFactory.returnTickerChartData(ticker, limit);
    console.log('ticker_chart = ',ticker_chart);
}

The complete service function is outlined below:

function returnTickerChartData(ticker, limit) {

    var q = $q.defer();

    var get_data = '';
    if (limit > 0) {
        get_data = '?limit=' + limit;
    }

    ApiFactory.getTickerQuotes(ticker.ticker).success(
        function(data, status, headers, config) {
            if (data.status == 'Success') {
                console.log('REST GET Ticker Chart', 'success');
                var data_array = [];

                for (var i=0; i<data.quotes.length; i++) {
                    data_array.push([data.quotes[i].start_epoch, data.quotes[i].price]);
                }

                var return_array = [{
                    "area": true,
                    "key": "Price",
                    "color": '#BFBFBF',
                    "values": data_array
                }];

                console.log('return_array = ',return_array);
                console.log('q =',q);
                q.resolve(return_array);
                return ticker_chart = return_array;

            } else {
                console.log('failed to REST GET Ticker Chart');
                q.reject('failed to REST GET Ticker Chart');
                return ticker_chart = 'failed to REST GET Ticker Chart';
            }
        }).error(function(data, status) {
            console.log('error in getting REST GET Ticker Chart');
            q.reject('error in getting REST GET Ticker Chart');
            return ticker_chart = 'error in getting REST GET Ticker Chart';
        });
}

The getTickerQuotes function within the ApiFactory:

function getTickerQuotes(ticker) {
    return $http.get('https://www.ourapi.../api/tickers/quotes/'+ticker, {cache: false});
}

What would be the best way to utilize the promise in this context? One alternative approach could involve using a $scope.watch function to await the change in the value of ticker_chart before attempting to render anything.

javascript angularjs promise angular-promise

Answer 1

Answer №1

It seems like you are setting up a promise in the function returnTickerChartData, but there is no return statement to actually return it. To correct this, modify the function as follows:

function returnTickerChartData(ticker, limit) {
    var deferred = $q.defer();
    // API call

    return deferred.promise;
}

Within the getTickerQuotes.success function, simply resolve the promise with the retrieved data. There is no need for the line

return ticker_chart = return_array;

. Instead, update the code as shown below:

function renderChart(ticker, limit) {
    TickerChartFactory.returnTickerChartData(ticker, limit)
        .then(function (result) {
            ticker_chart = result;
            console.log('ticker_chart = ', ticker_chart);
        });
}

EDIT: @Bergi made a valid point in the comments. If the method ApiFactory.getTickerQuotes already returns a promise, utilize that existing promise instead of creating a new one with deferred. Additionally, switch to using

ApiFactory.getTickerQuotes.then()

instead of .success().

Answer 2

It seems like you are setting up a promise in the function returnTickerChartData, but there is no return statement to actually return it. To correct this, modify the function as follows:

function returnTickerChartData(ticker, limit) {
    var deferred = $q.defer();
    // API call

    return deferred.promise;
}

Within the getTickerQuotes.success function, simply resolve the promise with the retrieved data. There is no need for the line

return ticker_chart = return_array;

. Instead, update the code as shown below:

function renderChart(ticker, limit) {
    TickerChartFactory.returnTickerChartData(ticker, limit)
        .then(function (result) {
            ticker_chart = result;
            console.log('ticker_chart = ', ticker_chart);
        });
}

EDIT: @Bergi made a valid point in the comments. If the method ApiFactory.getTickerQuotes already returns a promise, utilize that existing promise instead of creating a new one with deferred. Additionally, switch to using

ApiFactory.getTickerQuotes.then()

instead of .success().

What is the best method to utilize a promise to delay the execution of a function until the data is received and stored

Answer №1

Similar questions

Is there a neat method in React and Material UI for de-structuring the props that I am passing to useStyles?

Unit testing with Jest leading to the error message "MongoDB Error: topology was destroyed"

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

How can you make the table rows in jQuery scroll automatically while keeping the table header fixed in

Guide on incorporating Vue components: implementing component 2 within the template of component 1

Keep things in line with async functions in Node JS

Fade out the div element when clicked

Control the start and stop of an Express.js app in Node.js using PHP

Stopping form submission on a jQuery form

Is the tab not displaying correctly when using Bootstrap 5 button functionality?

Capturing mouse clicks in Javascript: a guide to detecting when the mouse moves between mousedown and mouseup events

How can you organize an array into rows and columns for easier viewing?

What is causing the issue with dynamic special characters not functioning properly in my React router?

Why does Drupal's Advagg display several css and js files?

Switching from using jQuery to Mootools in a short script that helps to balance the heights of

Error: Child component received an undefined prop

What is the best way to prevent duplicates in a Material-UI dropzone area?

Why does attempting to access an undefined property not trigger an error?

Using Angular: connecting $viewContentLoaded to manually initiate app bootstrapping

When using Javascript template literals, they function properly when assigned to a variable, but they do not work when included in a JSON