Issues arise in Ionic 4 when errors are encountered with object keys that are returned from an HTTP request

Recently, I came across a function that looks like this:

if (form.valid) {
      this.api.resetPassword(this.otpcode).subscribe(response => {
        if (response.success) {
          this.showToast(response.message);
          this.router.navigateByUrl("/login");
        }
        if (response.error) {
          this.showToast(response.error);
        } else {
          this.errors = response.errors;
        }
      });
    }
  }

However, when using VS Code, I encountered an error on the lines attempting to access the response properties such as response.success. The error message states: 

Property 'success' does not exist on type 'Object | any[]'.
  Property 'success' does not exist on type 'Object'.ts(2339)
. Initially, I assumed it was just an issue within VS Code, but even after running ionic cordova build, the same error persists in the console.

typescriptionic-frameworkionic4

Answer №1

My approach involved creating an exported variable to store the response before accessing its properties.

For example: 

export class ForgotPasswordPage implements OnInit {
  response: any;
     ......
}

Then, I proceeded with: 

onVerify(form: NgForm) {
    this.submitted = true;

    if (form.valid) {
      this.api.resetPassword(this.otpcode).subscribe(response => {
        this.response = response;
        if (this.response.success) {
          console.log(response);
          this.showToast(this.response.message);
          this.router.navigateByUrl("/login");
        }
        if (this.response.error) {
          this.showToast(this.response.error);
        } else {
          this.errors = this.response.errors;
        }
      });
    }
  }

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

Steps to begin again an Ionic application on IOS operating system

Currently, I am in the process of developing an Ionic application for both Android and IOS platforms. One challenge I am facing is that if any errors occur either on the server side or client side, the app automatically restarts. For Android, I have succe ...

angularjscordovaionic-frameworkphonegap-plugins

The method beforeEach in angular2/testing seems to be failing as it is not

Currently, I am utilizing Gulp, Gulp-Jasmine, and SystemJS to conduct tests on an Angular2 demo application. The setup is fairly straightforward. I have successfully implemented a System.config block and loaded the spec file. However, I encounter an error ...

typescriptangulargulpjasminesystemjs

How can I dynamically append content to the DOM when a user clicks?

On my form, I have an input field that allows users to click an add button and a new input field will appear below it, with the option to repeat this process indefinitely. However, I am facing an issue with adding an input field to the DOM upon a click eve ...

javascripttypescriptvue.js

What is the best way to sort through an Array of photo filenames?

https://i.sstatic.net/04cws.pngI have a list of image names that contain UUIDs. images [ "auditid_626_UUID_666666_time__1582577405550.jpg", "auditid_626_UUID_999999_time__1582577405554.jpg", "auditid_626_UUID_999999_time__15825 ...

angulartypescriptionic4

Exploring the Power of Buttons in Angular 2

I have a scenario where I need to implement two different buttons in my template. The first button is as follows: <button [style.background-color]="service_rec.status == 'Online' ? 'green' : 'red'" class="btn btn-defa ...

angulartypescript

Issues with Angular2 Router functionality not functioning as expected

I have been facing an issue while trying to set up a basic Angular2 application with login functionality using Typescript. Despite defining the Router, I encounter an error when trying to access the specified URL in a browser. The error message reads: Can ...

node.jstypescriptangular

What is the best method to convert a union type to an array and vice versa, in order to obtain all potential values?

For instance: type Y = 'c' | 'd'; const yVals = ??? Y; // ['c', 'd'] Alternatively, you can derive a union type from an array of all possible values. The objective is to ensure each potential value is included onl ...

typescript

Tips for ensuring that npm only creates one instance of a dependency when it is being used by multiple projects

Struggling a bit here. I am diving into npm and configuration files for the first time. The current challenge involves setting up a vue project (though it might not be directly related to the issue) with typescript and then reusing its code and components. ...

typescriptvue.jsnpm

Can you explain the variance between Next.js and Create React App?

I've been curious about understanding the distinctions between Next.js and Create React App (CRA). Both aim to simplify our lives when developing front-end applications with React. While researching online, I came across a key difference: Next.js o ...

reactjstypescriptreduxnext.jscreate-react-app

Guide to implementing asynchronous REST API requests in Ionic 2

I'm working on an app for a school that allows students to scan their ID cards and enter. On the teacher's side of the application, I display the number of students present in each class. Currently, I am using a refresher to reload the page and u ...

angularionic-frameworkionic2

Searching for MongoDB / Mongoose - Using FindOneById with specific conditions to match the value of an array inside an object nestled within another array

Although the title of this question may be lengthy, I trust you grasp my meaning with an example. This represents my MongoDB structure: { "_id":{ "$oid":"62408e6bec1c0f7a413c093a" }, "visitors":[ { "firstSource":"12 ...

javascripttypescriptmongodbmongoosefindoneandupdate

The Angular Property Decorator ensures that only one instance of a property is created per Class Type

I have implemented a Property Decorator that creates an Observable with static getter/setter for each property. Usage of the decorator looks like this: class Test { @ObservableProperty(DEFAULT_CATS) cats: number; @ObservableProperty(DEFAULT ...

angulartypescriptangular2-observablesangular-decorator

Can type safety be maintained while utilizing generics in code?

Suppose I have multiple classes with a similar method for saving models. For example, many services that include a saveModel method: public async saveModel(newModel: IModel): Promise<IModel> { return await newModel.save(); } I created a generic ...

typescriptgenericsdesign-patternstypesinterface

Manipulating information from one format to another

I am currently tackling the task of calculating scores based on departments within groups. For simplicity, I will focus on just one group as an example. Here is the data structure that I have: const data = [{ "id": "cklt7ln1k0922o0sabjkk74m9", ...

javascripttypescript

Produce new lines of code using the vscode.window.activeTextEditor.edit method in Visual Studio Code

Hey everyone, I'm currently working on a vscode extension that can automatically generate template code based on the language you are using when you click a button. However, there seems to be an issue with the formatting of the generated code as it do ...

typescriptvisual-studio-codevscode-extensions

Stopping the recursive function call in AngularJS

Utilizing the following function to retrieve users from a REST API, paginated by offset. Upon successful callback, the function recursively calls itself with a new offset to fetch the next set of users. Issue: When I change or exit the view, the FetchAtte ...

javascriptangularjsrecursionionic-framework

How can I display an ngx spinner after a delay of 1 second?

I am uncertain about the answer I came across on this platform. intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const time = 900; const spinnerLogic = () => { if (this.isRequestServed ...

javascriptangulartypescriptangular-http-interceptorsrxjs-observables

What are the drawbacks of combining exports through re-exporting in TypeScript?

Lately in TypeScript discussions, there seems to be a negative viewpoint on namespace BAD. However, I see value in organizing related declarations within a single namespace, similar to a library, to avoid excessive import statements. I have come across th ...

angulartypescript

The issue of "ReferenceError: Cannot access '<Entity>' before initialization" occurs when using a OneToMany relationship with TypeORM

There are two main actors involved in this scenario: User and Habit. The relationship between them is defined by a OneToMany connection from User to Habit, and vice versa with a ManyToOne. User Entity import {Entity, PrimaryGeneratedColumn, Column, Creat ...

typescriptnestjstypeormnrwl-nx

Enhanced interface with plugins

I've been developing a "manager" class that allows for the integration of "plugins". Each plugin has the ability to enhance the data property of the manager class. // manager.ts interface Data { // some props } class Manager { data: Data; ...

typescriptinterfacestatic-typing