A mistake has occurred: Unhandled promise rejection TypeError: Unable to assign the property 'devices' to an undefined object in Ionic 4 with Angular

Within my MyDevicesPage class, I am attempting to manipulate the res object and then pass it to the updateDevicesToServer method of DataService for further actions. The code compiles without errors, but at runtime, an error is thrown: ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'devices' of undefined

Below are the class and associated interfaces:

export class MydevicesPage implements OnInit {  

  devices : Array<deviceInterface>
  constructor(private deviceService : DeviceService,private route:  ActivatedRoute,private router: Router, private authenticationService : AuthenticationService) { }

  ngOnInit() {
    this.deviceService.getDevices().then((res : devicesInterface) => {
      if(res){        
        let data : ResUpdateDevices
        data.devices = res;
        this.devices = res.devices;        

        data.token = this.authenticationService.getToken();

        this.deviceService.updateDevicesToServer(data).subscribe(res => {
          console.log(res)
        },err=>{
          console.log(err)
        });
      } 
    })
  }

  goto_device(ssid : String, name : String){
    this.router.navigate(['members','device',ssid,name])
  }

}

ResUpdateInterface Interface

export interface ResUpdateDevices{
    devices : devicesInterface
    token : string
}

DeviceInterface Interface

export interface deviceInterface {
  ssid : String,
  name : String
}

DevicesInterface Interface

export interface devicesInterface {
  devices : Array<deviceInterface>  
}

Upon Console Logging res, the following output is shown:

{devices : [{ssid:"ssid", name :"name"}]}

Answer №1

This error is occurring because you need to define the data object before attempting to set data.devices = res;. Consider making the following adjustment:

const updatedData: UpdatedResDevices = {
    devices: res,
    token: this.authenticationService.getAccessToken(),
};
this.devicesList = res.devices;

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

Efficiently organizing dates in the Vuetify date range picker

I am working with a vuetify date range picker component and have the following code: <v-menu ref="effectiveDateMenu" v-model="effectiveDateMenu" :close-on-content-cl ...

How can Firebase and Ionic be used to customize the password reset template for sending verification emails and more?

I'm facing an issue with firebase's auth templates not supporting my native language. Is there a way to customize the password reset template to also handle verification and email address change emails? ...

Resolving callback definition issue: Can be assigned to constraint, yet may be instantiated with a distinct subtype. ( TS 2345 )

Seeking insight on the typing issue causing a compiler error in the code snippet below. Any suggestions for maintaining type-safety without resorting to any or as? Avoiding these workarounds is important to me. The challenge lies in the evidence() call, c ...

Creating a dynamic overlapping image effect with CSS and JavaScript

My fullwidth div has an image that overlaps it. When the browser is resized, more of the image is either shown or hidden without resizing the actual image itself. I managed to get this effect for the width, but how can I achieve the same result for the hei ...

Tips for keeping data on a page up-to-date using Node.js and Express

Currently delving into the world of Node.js and Express, I am immersed in a project that involves pinging websites and exhibiting the results on a web page. Leveraging HoganJS for templating as well. My primary focus is to decipher the steps necessary to m ...

Troubles with loading images on Node.js, Express, and EJS powered Bootstrap 5 navbar

Currently, I am in the process of creating a website using express/node.js/ejs. However, I am facing challenges when it comes to constructing a navbar with Bootstrap 5.0. In my app.js file, I have included express.static: app.use(express.static('publi ...

Attention! Circular dependency has been detected during compilation with warnings

Every time I attempt to build my project, an error is thrown- WARNING in Circular dependency detected: src\app\own-filter\own.filter.module.ts -> src\app\own-filter\own.filter.component.ts -> src\app\own-f ...

How can we verify the validity of URLs based on their length, presence of capital letters, and specific whole words?

I'm currently working on a piece of code that verifies the URL provided by users during sign-up for my application. I want to implement the following restrictions: URL must be at least 3 characters long No capital letters allowed Avoid certain words ...

Creating Global Variables in Node/Express Following a Post/Get Request

How can I dynamically pass the payment ID received after a POST request to a subsequent GET request in Node/Express for a payment system? Below is an example code snippet from my project: let paymentId; app.post("/api/payments", (req, res) => ...

Monitor the output of a spawned process that is currently in a state of awaiting user input

In my Swift program, I am logging information to the stdout while waiting for a termination signal of \n. The input is requested immediately upon starting and the info is logged 1~2 seconds later: fetchAndLogDataInBackground(); // will print some dat ...

Using Javascript, it is possible to generate a new JSON object through manipulation of an already

I have a JSON object that I am manipulating to create a new JSON object. The challenge lies in dynamically constructing a part of the JSON object. Below is the original JSON object: [{"acptFlag":true,"count":14288,"limsFlag":true,"plantId":30,"plantName": ...

upright scrolling mouse slider

In my project, I have implemented a vertical slider with mousewheel control using SwiperJS from https://swiperjs.com/. Although the slider is working perfectly fine, I am looking to fix the positions while scrolling on the page similar to the example pro ...

Data is not appearing as expected in the React component when using the data

I'm currently facing an issue while working with MUI. I am able to retrieve the list in console.log, but nothing is being displayed on the screen - no errors or data, just the console.log output. Here is a snippet of the data that I am receiving: ...

Ways to call a DIV element in a PHP file from a different PHP file

I am facing an issue with referring to a specific <div> element from one .php page to another. The current code is redirecting me to the home page of the first page, instead of displaying the desired content. Can anyone provide guidance on how to ach ...

Working with floating point numbers in Node.js with a zero decimal place

NodeJS interprets float values with a zero after the decimal point as integers, but this behavior occurs at the language level. For example: 5.0 is considered as 5 by NodeJS. In my work with APIs, it's crucial for me to be able to send float values w ...

Save the webpage source code to a file using JavaScript and Grunt

I am facing an issue and need assistance with my project. I have developed an app using GruntJs and now I need to download the source code of a webpage using GruntJs. For instance, let's assume I have a webpage at: example.com/index.html. What I wou ...

Error: The specified module 'sqlite' does not have an export named 'default' as requested

Having some difficulty with importing sqlite into my project. When I add this line: import sqlite from 'sqlite'; An error occurs: file:///D:/WebPro/WebProg/cwCode/dbInteract.js:2 import sqlite from 'sqlite'; ^^^^^^ SyntaxError: ...

Only send the parameter for variables that are not empty in the AJAX data

How can I pass the variables that are not empty in the data object for an AJAX request? In this scenario, the area variable is empty so I need to pass parameters for city and listing type instead. Can someone please help me figure out how to do this? va ...

Capturing click events on a stacked area chart with nvd3

Could someone assist me in capturing the click event on a nvd3 stacked area chart? I have successfully managed to capture tooltip show and hide events but am struggling with the click event. How can I obtain information about the clicked point? Please help ...