Was the result from the function not stored in the $scope variable?

Question

Was the result from the function not stored in the $scope variable?

Below is the code for my controller:

$scope.mainModel = getReviews({model: mainModelArr[1]});
$scope.compareModel = getReviews({model: compareModelArr[1]});

function getReviews(data) {
    $http.post(url, data)
        .success(function(res) {
            formatReviews(res);
        })
        .error(function(err) {
            console.log("An error occurred: " + err);
        });
}

function formatReviews(data) {
    var review = data[0];
    review.sumReviews = (review.sumReviews / review.ratingAvg).toFixed(0);
    review.sumRecommend = (review.sumRecommend / review.sumReviews * 100).toFixed(1);
    review.ratingAvg = review.ratingAvg.toFixed(1);
    console.log(review); // logs message correctly 
    return review;
}

Even though these functions are running without errors and logging the review variable, it seems like the review variable is not being assigned to either $scope.mainModel or $scope.compareModel.

NOTE: I am aware that it was not assigned because it does not appear in the HTML:

<p>{{mainModel}}</p>

What mistake did I make and how can I correct it?

javascript angularjs

Answer 1

Answer №1

When making Ajax requests, they work asynchronously. AngularJS utilizes promises to manage these requests

$scope.mainModel = undefined;
$scope.compareModel = undefined;

getReviews({model:mainModelArr[1]}).success(function(res){
    $scope.mainModel = formatReviews(res);
});

getReviews({model:compareModelArr[1]}).success(function(res){
    $scope.compareModel = formatReviews(res);
});

If you return a post request, it can be handled anywhere you call the getReviews method

function getReviews(data) {
    return $http.post(url, data)
    .error(function(err) {
        console.log("Something went wrong:", err);
    });
}

function formatReviews(data) {
    var review = data[0];
    review.sumReviews = (review.sumReviews / review.ratingAvg).toFixed(0);
    review.sumRecommend = (review.sumRecommend / review.sumReviews * 100).toFixed(1);
    review.ratingAvg = (review.ratingAvg).toFixed(1);   
    console.log(review); // logs message fine 
    return review;
}

Answer 2

When making Ajax requests, they work asynchronously. AngularJS utilizes promises to manage these requests

$scope.mainModel = undefined;
$scope.compareModel = undefined;

getReviews({model:mainModelArr[1]}).success(function(res){
    $scope.mainModel = formatReviews(res);
});

getReviews({model:compareModelArr[1]}).success(function(res){
    $scope.compareModel = formatReviews(res);
});

If you return a post request, it can be handled anywhere you call the getReviews method

function getReviews(data) {
    return $http.post(url, data)
    .error(function(err) {
        console.log("Something went wrong:", err);
    });
}

function formatReviews(data) {
    var review = data[0];
    review.sumReviews = (review.sumReviews / review.ratingAvg).toFixed(0);
    review.sumRecommend = (review.sumRecommend / review.sumReviews * 100).toFixed(1);
    review.ratingAvg = (review.ratingAvg).toFixed(1);   
    console.log(review); // logs message fine 
    return review;
}

Answer 3

Answer №2

When dealing with asynchronous code, it is important to use promises and their then methods instead of simply returning the value:

retrieveData({type: dataArr[1]}).then(function(result) {
    $scope.data = result;
});

retrieveData({type: compareDataArr[1]}).then(function(result) {
    $scope.compareData = result;
});

function retrieveData(data) {
    return $http.post(url, data)
    .success(formatData)
    .error(function(error) {
        console.log("An error occurred: "+error);
    });
}

Answer 4

When dealing with asynchronous code, it is important to use promises and their then methods instead of simply returning the value:

retrieveData({type: dataArr[1]}).then(function(result) {
    $scope.data = result;
});

retrieveData({type: compareDataArr[1]}).then(function(result) {
    $scope.compareData = result;
});

function retrieveData(data) {
    return $http.post(url, data)
    .success(formatData)
    .error(function(error) {
        console.log("An error occurred: "+error);
    });
}

Was the result from the function not stored in the $scope variable?

Answer №1

Answer №2

Similar questions

Showcasing numerous pictures from a Json file in ReactJS

What is the best way to use a timeout function to swap div layers in AngularJS?

Retrieving user input from a designated form using its name in JavaScript

What is the best way in Javascript to retrieve and process multiple stream chunks from a single API request using the fetch() method

Update the Vuetify tab to correspond with either the route or query parameters

Is it possible to adjust the position/target values of a webkit CSS transition without interrupting its operation

TinyMCE is deleting Bold tags in a numbered list when saving a form

Storing and accessing mixed file types in a web application using either a Blob or File System

What is the best way to delete a subdocument from a main document when either condition x is true or condition y is true?

Using JavaScript, you can move through an array of divs by detecting keypress events

I am facing difficulty in navigating to a different component

`The activation of Bootstrap list items through embedded spans`

What is the best way to implement React.memo or useMemo and ensure semantic guarantees?

Retrieve the value with `eventArgs.get_value()` function to obtain the selected text instead of the ID

Retrieve the values of two inputs from outside of the event

Solving the issue of jump in vertical motion after a jQuery slideDown animation

Can I incorporate the name of my web application into the URL using Node.js?

Is it possible to create an image using jqplot's jqplotToImageStr({}) function on Internet Explorer 8 and earlier versions?

Add middleware to one individual store

How can I pass props from a custom _app.js file to the <Navbar> component in Next.js?