I have the following error in my Ionic project "Error: Uncaught (in Promise): Typeerror: Cannot read Property '0' of Undefined"

Question

Hello my Ionic project is with the following error (Error: Uncaught (in Promise): Typeerror: Cannot read Property '0' of Undefined) follows an attached image of the problem. I would like some hint. Follow the project link.

https://drive.google.com/open?id=1Ivez_R0Pv9RKR0D2EAoZD--1VqTBC8bf

         login.ts

        import { Component } from '@angular/core';
       //import { NgForm } from '@angular/forms';

       import { NavController, ToastController } from 'ionic-angular';

        import { UserData } from '../../providers/user-data/user-data';
         import { AuthService } from 
       "../../providers/authservice/authservice";
        import { UserOptions } from '../../components/user-options/user-
         options';
       import { Storage } from "@ionic/storage";
        import { UserPage } from '../user/user';


        @Component({
           selector: 'page-user',
         templateUrl: 'login.html'
          })
       export class LoginPage {
         login: UserOptions = { username: '', password: '' };
       userData= {"username":"", "password":""};
         responseData: any;
       public userInfo: any;
        public dataSet: any;

       submitted = false;

        constructor(
        public navCtrl: NavController, 
       public loginData: UserData, 
       public authService: AuthService,
        public storage: Storage,
       public toastCtrl: ToastController
        ) { }

     //onLogin(form: NgForm) {
      onLogin() {
       this.submitted = true;
       this.dataSet = [];
      //var userdatalocal;

      if(this.userData.username && this.userData.password){
      //API connection
       this.authService.postData(this.userData, "login")
      .then((result) => {
       this.responseData = result;

      if(this.responseData){
      this.dataSet = this.responseData;


     //localStorage.setItem('userData',JSON.stringify(this.responseData));
     //this.storage.set('userData',JSON.stringify(this.responseData));
     this.userInfo = this.dataSet.userId[0].userData;
     // console.log(this.dataSet.userId[0].userData.email);

      this.loginData.login(this.userData.username); //para setar flag 
       loggedInMenu

      this.navCtrl.push(UserPage,this.dataSet);
    } else {
      // If login or password is invalid then return to LoginPage
      console.log("Erro18r: login/password invalid or bad connection");
      this.navCtrl.setPages([
        {page: LoginPage}
      ]) ;
      let toast = this.toastCtrl.create({
        message: this.responseData.error.text ,//'Login or password 
       incorrect.',
        duration: 5000
      });
      toast.present();
       }
       }, (err) => {
        //Connection failure message
       console.log(err);
        this.navCtrl.setPages([
         {page: LoginPage}
        ]) ;
          })
         } 
        }

          }

Answer 1

I can’t see the image of where I am now because of a proxy. It may not look like it, but you are expecting the property '0' of some object q has not been instantiated (maybe an array). q can happen is q this object can be instantiated later, ie after the moment when Ionic is trying to get the value.

Another thing, is that Ionic cli is kind of lame (at least in windows), so you make a change, wait for the refresh and just come back an old version, at that moment or a few refreshs later. This is easily solved by killing the process and giving ionic serve again.

If the problem is actually getting value from an instantiated object, you can use the console.log to check the value/instance, debug the .ts by Chrome, debug by vscode (if you are using it), or even trying to put '?' right after the name of the object where it is being used. In other words, you need to figure out which object is without an instance.

Answer 2

Dude, the error occurs in this statement this.userInfo = this.dataSet.userId[0].userData;, you have to check if the returned object is valid and if you are accessing it correctly.

Answer 3

The object is not being assembled ... probably here

"responseData = result;"

Change to

"responseData = result.json();"

I believe that’s what’s wrong.