The function self.ctx.$scope.$apply is missing or undefined

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.

Answer №1

Thingsboard's $scope has a unique structure that does not include Angular's $apply function, as explained in this link.

To handle this, you can simply follow these steps:

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

Answer №2

Can you provide the value of self? Consider using console.log for debugging:

        .then(data => {
            console.log(self, 'self'); // debug statement (check for '$scope.$apply' if missing)
            self.ctx.$scope.$apply(function() {

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

Leveraging Angular2's observable stream in combination with *ngFor

Below is the code snippet I am working with: objs = [] getObjs() { let counter = 0 this.myService.getObjs() .map((obj) => { counter = counter > 5 ? 0 : counter; obj.col = counter; counter++; return view ...

Utilizing jQuery to toggle nested divs within identical parent divs when they contain more than three elements using the :nth-child selector

Within my HTML markup, I have created two parent div elements that are exactly the same but contain different content. My goal is to have a functionality where if a parent div has more than 3 child div elements, a "show more" text will be displayed at the ...

Avoid reloading the header component along with its APIs when navigating routes in React JS

I'm currently working on a web application using react js/next js and within it, I have various pages that make use of globally shared components like the Header and Footer. However, I am facing an issue where I want to prevent unnecessary re-renders ...

Issue with Slider Width in WP 5.6 editor and ACF Pro causing layout problems

Is anyone else experiencing a specific issue after updating to WP 5.6? Since the update, all my websites are facing problems with rendering a Slick Slider in the Block Editor. Interestingly, everything looks fine on the front-end. The root of the problem ...

The function react.default.memo is not recognized at the createSvgIcon error

After updating my Material-UI version to 1.0.0, I encountered a peculiar error message stating that _react.default.memo is not a function at createSvgIcon Despite attempting to downgrade the react redux library to version 6.0.0 as suggested by some ...

The Express.js feature "app.use() mandates the use of middleware functions"

Currently, I am delving into learning Express.js 4 and Node, but I seem to have hit a roadblock with an error that has me stumped. I'm attempting to utilize the node-sass package to compile my sass code; however, I've encountered obstacles in ge ...

Use Jquery to modify the value of a data attribute when a key is released

When I am adding some HTML to a document, one part includes a text input field. My goal is to update the value of the closest li element's data attribute whenever information is typed into this input field. Unfortunately, this functionality is not cu ...

Is it possible to integrate Wavify with React for a seamless user experience?

For my website designs, I have been experimenting with a JavaScript library known as Wavify (https://github.com/peacepostman/wavify) to incorporate wave animations. Recently delving into the world of React, I pondered whether I could integrate Wavify into ...

methods for transferring global variable from view to controller in angularjs

Currently, I am facing an issue with sending backend data from EJS to the frontend controller of AngularJS. app.js I am passing data to view/indexcontents. var users = [ { name: 'john', email: '<a href="/cdn-cgi/l/email-pro ...

Retrieve the current height of the iFrame and then set that height to the parent div

Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...

Utilizing JavaScript within my WordPress site

I'm experiencing some issues with my JavaScript code in WordPress. I have been trying to use the following code on my page, but it doesn't seem to work properly. Can someone please guide me on how to integrate this code within my WordPress page? ...

Learn the technique of looping through multiple HTML elements and wrapping them in Vue.js easily!

i need to wrap 2 HTML elements together Here is my code snippet using Vue.js <tr> <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th> <th v-for="(item99,index) in product_all" :key=" ...

Using default value in PHP and JavaScript for a select dropdown

I have an array of cities stored in associative arrays using PHP. I am utilizing JavaScript's "on change" event to capture the value of each item. In the future, I am considering implementing geolocation for setting a default item. Here are my arrays ...

Tips for including a hashtag in an AJAX request

When using ajax to send messages to the server in my chat application, I encountered an issue where everything after a hashtag is omitted. I attempted to address this by encoding the message, but it resulted in other complications in the PHP code. The enco ...

Incorporating interactive maps into an AngularJS web application

I've been attempting to integrate Google Maps into my AngularJS application, using the script tag below: <script src="https://maps.googleapis.com/maps/api/js?key=[MySecretKeyHere]&callback=initMap" async defer></script> I found this ...

Angular library modules for node packages

After developing my latest library, I noticed some red underlines: https://i.stack.imgur.com/ffAjI.png In this package, I plan to incorporate other npm packages like ionic and crypto. I attempted to update the package.json within the library: { "name ...

Is the && operator being utilized as a conditional statement?

While following a tutorial, I came across this code snippet that uses the 'and' operator in an unusual way. Is this related to React? Can someone provide an explanation or share documentation that clarifies it? {basket?.length > 0 && ...

Incorporating Stripe into your Next.js 13 application: A step-by-step guide

Struggling to incorporate Stripe into my Next.js 13 app for a pre-built checkout form. So far, all attempts have fallen short. Seeking assistance from anyone who has conquered this integration successfully. Any tips or guidance would be highly valued. Pl ...

Having trouble sending a POST request to a nested array in Express JS

Welcome, this is my first post here so feel free to point out any missing information or incomplete details in my question :) I am currently working on a project where I need to make a POST request to an array within my data structure called features: co ...

Refresh the array object following a personalized filter

I am currently using a custom filter to aggregate a $scope object within an ng-repeat block. Here is my code snippet: $scope.myobj = isSelected ? $filter('customFilter')($scope.origObj) : $scope.origObj In the above code, $scope.myobj is util ...