self.ctx.$scope.$apply is not a function

Question

I am creating a custom widget on thingboard pe to call an api endpoint and display results in table format. I have been running into this error - self.ctx.$scope.$apply is not a function and for the life of me cant seem to find a solution. Looking at the browser console, I know the api request is done and status 200 is received along with results in JSON. Anyone know how i can solve this. here is my code -

`

self.onInit = function() {
    self.ctx.$scope.fetchData = function() {
        const url = 'https://xxxxx.xxxxxxxxxxxxxx';
        const username = 'xxxxxxxxxxxxxxxxxxx'; 
        const password = 'xxxxxxxxxxxxxxxxx'; 

        const headers = new Headers({
            'Authorization': 'Basic ' + btoa(`${username}:${password}`),
            'Content-Type': 'application/json'
        });

        fetch(url, { method: 'GET', headers: headers })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                self.ctx.$scope.$apply(function() {
                    if (data && data.length > 0) {
                        self.ctx.$scope.data = data;
                    } else {
                        self.ctx.$scope.data = null;
                    }
                });
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                self.ctx.$scope.$apply(function() {
                    self.ctx.$scope.data = null;
                });
            });
    };

    self.ctx.$scope.fetchData();
};

Tried using $timeout instead no dice

Answer 1

Thingsboard's $scope is a custom structure and it doesn't have Angular's $apply function.

So simply do the following

...
.then(data => {
    if (data && data.length > 0) {
        self.ctx.$scope.data = data;
    } else {
        self.ctx.$scope.data = null;
    }
})
...