Javascript function not updating variable instantly

Question

Please bear in mind that I'm super new to Javascript and I'm still learning the basic concepts.

I'm working adapting the autocomplete function (using Devbridge autocomplete): https://github.com/devbridge/jQuery-Autocomplete

In order to receive the autocomplete results I pass the argument to Flask and it returns the matching values after having searched those values in a MongoDB collection.

The results are assigned to the "result1" variable, which is also defined globally as an empty list.

Once the autocomplete feature is called, the "result1" variable is updated with the values.

The variable "result" contains a dict of "suggestions" which should contain the values in "result1". These are the values that should be displayed, but the values are empty.

If I call the autocomplete function a second time, the values triggered in the previous call will be displayed.

I assume that the problem that the variable "result" is being set before the call to the autocomplete method in Flaks is finished. Hence, the "result" value is always empty the first time.

    var result1 = [];
$(function () {
    $("input[id^='asset']").devbridgeAutocomplete({
        lookup: function (query, done) {
            {
                $.getJSON("{{url_for('base_blueprint.autocomplete')}}", {
                    paramName: query,
                }, function (data) {
                    result1 = data['matching_results'];
                    console.log(result1)
                });
                var result = {
                    suggestions: result1
                }
            }
            console.log(result1)
            done(result);
        },
        minChars: 3,

        onSelect: function (suggestion) {
            alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
        }
    });

})

In the logs you may see that the value is always empty (0) and then in the second time it contains already the values that I would have expected before (29).

The question I would have is whether it is possible to make sure that the variable result is not set until the data is not received from the results coming from Flask.

Thanks in advance, Kat

Try moving the call to `done` and calculation of its argument to inside the `function(data)` callback passed to `$.getJSON`. At the moment you're trying to use the result before `data` arrives. — traktor, Sep 14 '22 at 22:36

score 1 · Accepted Answer · answered Sep 14 '22 at 22:37

You need to call done() inside of the getJSON callback function.

$(function () {
  $("input[id^='asset']").devbridgeAutocomplete({
    lookup: function (query, done) {
      $.getJSON(
        "{{url_for('base_blueprint.autocomplete')}}",
        {
          paramName: query
        },
        function (data) {
          const result = {
            suggestions: data["matching_results"]
          };
          console.log(result);
          done(result);
        }
      );
    },
    minChars: 3,

    onSelect: function (suggestion) {
      alert("You selected: " + suggestion.value + ", " + suggestion.data);
    }
  });
});

Javascript function not updating variable instantly

1 Answers1