How to update global variable after http call Angular

Question

I have a global variable which I need to update after http get call. After update I need to pass this updated variable to other function. I can't understand what is the best way to do this. Here is my code:

    app.controller('myCtrl', function($scope, $http) {
     var data = '';
     $http.get("data.json")
       .then(function(response) {
        data = response.data;
     });
     vm.mapOptions = {
        controls: {
            navigator: false
        },
        center: [40, -35],
        zoom: 3,
        layers: [{
            style: {
                fill: {
                    color: '#1996E4'
                },
                stroke: {
                    color: '#FFFFFF'
                }
            },
            type: 'shape',
            dataSource: data
        }],
        shapeCreated: onShapeCreated,
        shapeFeatureCreated: onShapeFeatureCreated
    };
    });

Is it possible at all to update global variable after http call?

Thank you for help in advance.

This will probably be an issue with whatever vm is. Your code should update the dataSource, but are you sure vm would "rerender" if that data source changed? — chris
– chris, Commented Apr 21, 2017 at 2:08
You can console.log(data) to see if its value changes when you expect. — chris
– chris, Commented Apr 21, 2017 at 2:09
it's not really clear what you are trying to accomplish here. In general, you should use services rather than "global variables". also, you aren't showing where you are declaring vm here, or how dataSource is used, but since you declared data as a primitive string, it's likely to not work as expected, especially since response.data appears to be JSON.... — Claies
– Claies, Commented Apr 21, 2017 at 3:13

Emad Dehnavi · Accepted Answer · 2017-04-21 02:35:57Z

When you do a http request, it takes some time to send the request and get the response, specially when you send the request to a API on a server,but in meanwhile the execution continues immediately and the statement after your http call is executed and if you have something that depends on the response, most properly will be failed.

in your case vm.mapOptions have dependency to data, which is a local variable getting the respnse from get request. so what can you do?

Step 1 :

make a function for all codes that are involve with your response :

$scope.myCallBack = function(data){
  vm.mapOptions = {
    controls: {
        navigator: false
    },
    center: [40, -35],
    zoom: 3,
    layers: [{
        style: {
            fill: {
                color: '#1996E4'
            },
            stroke: {
                color: '#FFFFFF'
            }
        },
        type: 'shape',
        dataSource: data
    }],
    shapeCreated: onShapeCreated,
    shapeFeatureCreated: onShapeFeatureCreated
   };

}

Step 2 : Call the myCallBack function inside your $http.get right after getting the response

var data = '';
 $http.get("data.json")
   .then(function(response) {
    data = response.data;
    $scope.myCallBack(data);
 });

Collectives™ on Stack Overflow

How to update global variable after http call Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related