What is the best way to ensure that $.getJSON executes before $http in Javascript?

Question

What is the best way to ensure that $.getJSON executes before $http in Javascript?

Within my web page controller, I have implemented the following Javascript code:

 $.getJSON('resources/properties/properties.json', function(data) {
    $scope.properties = data; 
    });

$http({
    method: 'GET',
    url: $scope.properties.Properties.dataLocation
        }).
        success(function (data) {
        $scope.all_types_and_configs = data;
        $scope.exec = [];    
        }).
        error(function (data) {
        $scope.error = data.message;
        $scope.data = '';
        return;
        });
});

The format of the json file being fetched is not causing any issues.

The intention is for the $.getJSON command to be executed first and then followed by the $http request. However, when I attempt to display "properties" using a console.log just below it, the output is "undefined."

Why is the sequence of execution not following the order in which it has been written?

javascript json http getjson

Answer 1

Answer №1

The code is running sequentially, with callback functions executing upon completion of corresponding requests. To ensure the second call is made after the first request completes, place it within the first callback function:

$.getJSON('resources/properties/properties.json', function(data) {
    $scope.properties = data;
    $http({method: 'GET', url: $scope.properties.Properties.dataLocation}).
        success(function (data) {
            $scope.all_types_and_configs = data;
            $scope.exec = [];    
        }).
        error(function (data) {
           $scope.error = data.message;
           $scope.data = '';
           return;
        });
});

Answer 2

The code is running sequentially, with callback functions executing upon completion of corresponding requests. To ensure the second call is made after the first request completes, place it within the first callback function:

$.getJSON('resources/properties/properties.json', function(data) {
    $scope.properties = data;
    $http({method: 'GET', url: $scope.properties.Properties.dataLocation}).
        success(function (data) {
            $scope.all_types_and_configs = data;
            $scope.exec = [];    
        }).
        error(function (data) {
           $scope.error = data.message;
           $scope.data = '';
           return;
        });
});

Answer 3

Answer №2

The execution is asynchronous, allowing both calls to be made independently. When using $.getJSON, utilize the third parameter - success callback - to synchronize them. Check out the documentation for more information.

Why are you combining jQuery AJAX and Angular $http?

Answer 4

The execution is asynchronous, allowing both calls to be made independently. When using $.getJSON, utilize the third parameter - success callback - to synchronize them. Check out the documentation for more information.

Why are you combining jQuery AJAX and Angular $http?

Answer 5

Answer №3

If you want to ensure that your code runs only after a request has been completed, you can utilize the JQuery.done function.

Here is an example of how you can achieve this:

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

Answer 6

If you want to ensure that your code runs only after a request has been completed, you can utilize the JQuery.done function.

Here is an example of how you can achieve this:

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

Answer 7

Answer №4

Just like how you've successfully executed the line $scope.properties = data; after receiving the JSON, you need to place it within the callback function that you pass to getJSON.

Why isn't the code running in the order it's written?

Actually, it is.

When you use getJSON(url, foo), it indicates "Send an HTTP request to the specified URL and set up a function foo to be called upon receiving the response".

You might be expecting it to pause and wait for the response before proceeding with anything else. However, that would freeze the user interface and cause a negative experience.

Answer 8

Just like how you've successfully executed the line $scope.properties = data; after receiving the JSON, you need to place it within the callback function that you pass to getJSON.

Why isn't the code running in the order it's written?

Actually, it is.

When you use getJSON(url, foo), it indicates "Send an HTTP request to the specified URL and set up a function foo to be called upon receiving the response".

You might be expecting it to pause and wait for the response before proceeding with anything else. However, that would freeze the user interface and cause a negative experience.

What is the best way to ensure that $.getJSON executes before $http in Javascript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to customize pixel scrolling on page reload or through the use of a hyperlink to a specific tab in a page

"Turn a blind eye to Restangular's setRequestInterceptor just this

Implement a code to apply to an image that is loaded dynamically

What is the best way to apply CSS modifications to sibling elements that are related?

Split the text using the newline character (' ') and not the double newline character (' ')

Reactjs and Redux encounter an Unhandled Rejection with the error message stating "TypeError: Cannot read property 'data' of undefined"

AngularJS mouse event is triggered repetitively within a loop

Unable to deactivate button using JavaScript following an AJAX request

The injector is currently updating the initial value in the test

What could be the reason for the absence of a TypeScript error in this situation?

Showcasing Portfolio Work in a User-Friendly Mobile Design

List-style-type outside of a table's boundaries

What is the code for a non-breaking space in a JavaScript string?

Using Jquery to Connect a Change Event to Child Elements

Tips for designing a versatile component to handle numerous buttons triggering form pop-ups

If a DOM element contains any text node, completely remove the element

What to do when faced with an unexpected return in a requireJS application while running JSLint?

Creating a live notification in the chat that displays "User is typing" to all participants

Why is only the peak of the wave visible? I am eager to showcase the full extent of its beauty

The functionality of the controller is not functioning properly in AngularJS