The current data isn't being reflected in the view

I am currently using RC3 and have encountered an issue where a variable of an object does not update on the view. This problem arises when retrieving an object from Google, which can take some time.

In previous versions before RC, the view would automatically update once Google returned the result.

Below is the code snippet that I am using to fetch an object from Google. The console displays the data returned by Google, but the view does not reflect this change.

var service = new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
    origins: [p1],
    destinations: [p2],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
}, function(response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
        alert('Error: ' + status);
        let googDist = google.maps.geometry.spherical.computeDistanceBetween(p1, p2);
        return Math.round(googDist / 1000 *10)/10;
    } else {
        //console.log(response.rows[0].elements[0].distance.text);
        this.car.drivingDistance = response.rows[0].elements[0].distance.text; 
     }
});
console.log(this.car.drivingDistance);

While the console accurately displays the Google result, the view fails to update accordingly.

Appreciate any assistance on this matter.

Answer №1

let googleService = new google.maps.DistanceMatrixService;
googleService.getDistanceMatrix({
    startingPoints: [point1],
    endingPoints: [point2],
    modeOfTravel: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
}, (response, status) => {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
        alert('Error: ' + status);
        let googleDistance = google.maps.geometry.spherical.computeDistanceBetween(point1, point2);
        return Math.round(googleDistance / 1000 *10)/10;
    } else {
        //console.log(response.rows[0].elements[0].distance.text);
        return response.rows[0].elements[0].distance.text; 
     }
});

When using TypeScript, functions are called like this: () => { }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular2, RxJS Subject HTTP request - If an error occurs, the request will not be triggered again

Encountering an issue with handling an http error response (specifically a 422 validation error from the backend). After receiving an http error response, unable to trigger the request again by clicking the button. 1) Utilizing a subject property and cal ...

Creating a mapping for a dynamic array of generic types while preserving the connection between their values

In my code, I have a factory function that generates a custom on() event listener tailored to specific event types allowed for user listening. These events are defined with types, each containing an eventName and data (which is the emitted event data). My ...

I'm having trouble with implementing a basic show/hide feature for the login and logout options in the navigation bar using Angular. Can anyone help me figure out why it's

Is there a way to display the functionality after logging in without using session storage or implementing the logout function? The HTML for navigation is provided below. <nav class="navbar navbar-expand-sm navbar-light bg-light"> ...

Using custom hooks in JSX triggers a TypeScript error when the returned component is accessed

i just created a custom hook // useDropdown.ts function useDropdown(defaultState: number, options: number[]) { const [state, setState] = useState(defaultState); function Dropdown({ name }: { name: string }) { return ( <> <sel ...

Exploring Angular - Is it possible to automate testing for a disabled field using Selenium Protractor?

For my MEAN stack project, I am implementing Selenium webdriver to conduct frontend UI testing. There is a field that is non-editable. Please refer to the attached image: Image How can I verify that this field cannot be edited? it('not edit th ...

Can you explain the step-by-step process of how an await/async program runs in TypeScript/JavaScript or Python?

As a C++ developer specializing in multithreading, I've been diving into the intricacies of async/await. It's been a challenge for me as these concepts differ from how C++ programs are typically executed. I grasp the concept of Promise objects, ...

Encountering error 2307 "Cannot find module" when using Vue 3 with script setup and TypeScript

I am currently attempting to run unit tests in my Vue3 project using vue/test-utils and jest. Upon running the npm run test script, the test fails due to an error with the import: error TS2307: Cannot find module 'pathtofile/file.vue' I have tr ...

Definition for TypeScript for an individual JavaScript document

I am currently attempting to integrate an Ionic2 app within a Movilizer HTML5 view. To facilitate communication between the Movilizer container client and the Ionic2 app, it is crucial to incorporate a plugins/Movilizer.js file. The functionality of this f ...

Use PipeTransform to apply multiple filters simultaneously

Is it possible to apply multiple filters with PipeTransform? I attempted the following: posts; postss; transform(items: any[]): any[] { if (items && items.length) this.posts = items.filter(it => it.library = it.library ...

What is the best method for transforming an object into an interface without prior knowledge of the keys

I am looking for a solution to convert a JSON into a TypeScript object. Here is an example of the JSON data: { "key1": { "a": "b" }, "key2": { "a": "c" } } The keys key1 and key2 a ...

Deactivating a Component in Ionic Angular

I am interested in including a CanDeactivate Guard in my Ionic Angular project. After reading about the new "CanDeactivateFn" Guard, I have been unable to find any information or examples on how to implement it. Could someone provide me with an example? ...

Is it considered safe to modify variables by using this[varName] = something within a function that includes varName as a parameter?

As I continue working on this function, a question arises regarding the safety of changing variables in this manner. In my Angular service, I utilize utility functions where context represents this from the component calling the function. The code snippet ...

Call a function within a stateless component in a React application

I have a question regarding my React component. I am attempting to call the function ButtonAppBar within my stateless component, but the TypeScript compiler is throwing an error stating '{' expected. I'm unsure whether I need to pass it to m ...

What is the best way to utilize ngFor for iterating through a Map variable of classes in TypeScript?

In my TypeScript file, I have a class named `myMap` that contains a variable called `navList`, which is of type Map<string, string> and holds multiple key-value pairs. I am currently attempting to iterate over the values stored in `navList` within my ...

Leveraging File functionality in TypeScript

In the process of developing a web application with Angular 4 and Typescript, I encountered an issue while attempting to retrieve the date of a file for upload. Specifically, when trying to access the lastModified property of a File object, Typescript retu ...

Implementing dynamic classes for each level of ul li using JavaScript

Can anyone help me achieve the goal of assigning different classes to each ul li element in vanilla Javascript? I have attempted a solution using jQuery, but I need it done without using any libraries. Any assistance would be greatly appreciated! con ...

Angular's Dynamic Injection: Introducing a new component into its parent component

I am looking for guidance on injecting a component dynamically into another in Angular 4, as well as passing values from the parent component to the child component. If anyone can provide a sample of working code, it would be greatly appreciated. ...

When I click on the button, the output does not appear

Even though I know how to write this in pure javascript, I am new to angular so when I click submit, nothing happens and I don't get any result. index.html <input type="text" ng-model="username" placeholder="Username"> <input type=" ...

ejs-lineargauge major divisions and minor divisions centered

I've been trying to align majorTicks and minorTicks in the middle of the axis, but so far I haven't found a solution despite searching and googling extensively. Here's a snippet of my code: majorTicks: { height: 12, interval: 1, width ...

Is there a way to incorporate a dropdown feature into a search bar using Ant Design?

I'm currently working on a project that requires me to incorporate two drop-down menus inside the search box. Despite following the guidelines provided in the documentation (https://ant.design/components/input), I encountered a problem when trying to ...