I've been working on a custom widget for Thingboard PE that calls an API endpoint and displays the results in a table format. I keep encountering the error message "self.ctx.$scope.$apply is not a function" and despite my efforts, I haven't been able to find a solution. After checking the browser console, I can see that the API request is successful, with a status code of 200 and results in JSON format. Can anyone help me with this issue? Here is the code snippet:
`
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();
};
I attempted using $timeout as an alternative, but it didn't work.