Execution issue with Typescript function

Question

Execution issue with Typescript function

In my Nativescript project, I have the following TypeScript file:

import { Observable } from 'tns-core-modules/data/observable';
import { isIOS } from "tns-core-modules/platform";
import { Color } from "tns-core-modules/color";
import { request, getFile, getImage, getJSON, getString } from "tns-core-modules/http";

export class HomeViewModel extends Observable {

    items: {
        name: string,
        desc: string, 
        price: string, 
        imageSrc: string, 
     }[];

    getData = getJSON("http://localhost:3000/items").then((r: any) => {
        this.getData = r; // Assign data from response on success
            console.log("blarg!!!")
        }, (e) => {
    }); 

    onItemLoading(args) {
        if (isIOS) {
            var newcolor = new Color("#e6e6e6");
            args.ios.backgroundView.backgroundColor = newcolor.ios;
        }
    }

    constructor() {
        super();
    }
}

I am facing an issue where the getData function is not being called or executed. How can I trigger the execution of getData function?

typescript nativescript

Answer 1

Answer №1

It appears that the current code is not very type-safe and may lead to unintended consequences.

getData = getJSON("http://localhost:3000/items").then((r: any) => {
    this.getData = r; // assigning it from the response upon success
        console.log("blarg!!!")
    }, (e) => {
});

If you declare the type in the initial assignment, it would look like this:

getData: Promise<void> = ...

If you specify the type in the inner assignment, it would be:

this.getData = r as any;

The above solutions might not achieve the desired functionality. Perhaps a better approach would be:

data: any;

constructor() {
    super();

    getJSON("http://localhost:3000/items").then((r: any) => {
        this.data = r; // assign it from the response when successful
            console.log("blarg!!!")
        }, (e) => {
    });
}

Answer 2

It appears that the current code is not very type-safe and may lead to unintended consequences.

getData = getJSON("http://localhost:3000/items").then((r: any) => {
    this.getData = r; // assigning it from the response upon success
        console.log("blarg!!!")
    }, (e) => {
});

If you declare the type in the initial assignment, it would look like this:

getData: Promise<void> = ...

If you specify the type in the inner assignment, it would be:

this.getData = r as any;

The above solutions might not achieve the desired functionality. Perhaps a better approach would be:

data: any;

constructor() {
    super();

    getJSON("http://localhost:3000/items").then((r: any) => {
        this.data = r; // assign it from the response when successful
            console.log("blarg!!!")
        }, (e) => {
    });
}

Answer 3

Answer №2

To achieve the desired outcome, consider invoking it at a higher level within the stack. Alternatively, if you wish for getData to execute upon object creation, ensure that getData() is called in your constructor function.

Answer 4

To achieve the desired outcome, consider invoking it at a higher level within the stack. Alternatively, if you wish for getData to execute upon object creation, ensure that getData() is called in your constructor function.

Execution issue with Typescript function

Answer №1

Answer №2

Similar questions

Linking key value pairs through a TypeScript interface

AngularJS ng-model not refreshing

Error message in Typescript with React: "The type 'ComponentClass<StyledComponentProps<{}>>' cannot be assigned to type 'typeof MyComponent'"

Connecting Ionic 3 with Android native code: A step-by-step guide

A function injected into a constructor of a class causes an undefined error

How to Utilize Knockout's BindingHandler to Integrate JQuery.Datatables Select Feature?

Navigating through multiple pages using an Observable in Angular

Is there a way to identify the specific button that was clicked within an Angular Material dialog?

Access-Control-Allow-Origin header not being sent by ExpressJS

An error has occurred with mocha and ts-node unable to locate the local .d.ts file

What is the process of overriding a method from an abstract class that employs generics for typing?

Conditional type in Typescript can be used to infer tuple types

A guide on exporting table data to PDF and enabling printing features in Angular 7

Learn how to use JavaScript to parse binary files

Creating a numeric sequence based on the date of a corresponding transaction - a step-by-step guide

Troubleshooting React child problems in TypeScript

Error: The TypeScript aliases defined in tsconfig.json cannot be located

My app is having trouble updating routes correctly. Can anyone provide guidance on how to configure routeConfig properly for my application?

What does Angular 5 offer in terms of functionality that is equivalent to?

The TypeScript error is causing issues in the Express router file