Unable to retrieve data following a promise in Ionic 3

Hello, I'm currently working on an Ionic application that needs to display data in a Form Group after retrieving it with a SOAP ReadData request.

Although I call my function and try to display the data in the form, there seems to be an issue as the form is not appearing.


constructor(
  public navCtrl: NavController,
  public navParams: NavParams,
  private privacyProvider: PrivacyProvider,
  private formBuilder: FormBuilder
) {
  
  this.myParam = navParams.get('myParam');

  console.log(this.myParam);

  this.getData().then(() => {
    console.log(this.iobData);
    debugger;
    this.formData = this.formBuilder.group({
      ID_INSTALLATO: new FormControl(this.iobData.id_installato),
      ID_ANAGRAFICA: new FormControl(this.iobData.id_anag),
      ID_PRODUTTORE: new FormControl(this.iobData.id_produttore),
      ID_GRUPPO: new FormControl(this.iobData.id_gruppo),
      ID_INSTALLATORE: new FormControl(this.iobData.id_installatore)
    });
  });

}

getData(){
  return new Promise((resolve, reject) =>{
    this.privacyProvider.getIOBData(this.myParam).subscribe((data)=>{
      if (data) {
        this.iobData = data;
        resolve(true);
      } else {
        reject();
      }
    })
  });
}

How can I resolve this issue? Here is my HTML code:


<ion-content>
  <ion-list *ngIf="formLoaded">
    <form [formGroup]="formData">
      <ion-item>
        <ion-label stacked>ID INSTALLATO</ion-label>
        <ion-input formControlName="ID_INSTALLATO" type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>ID ANAGRAFICA</ion-label>
        <ion-input formControlName="ID_ANAGRAFICA" type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>ID PRODUTTORE</ion-label>
        <ion-input formControlName="ID_PRODUTTORE" type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>ID GRUPPO</ion-label>
        <ion-input formControlName="ID_GRUPPO" type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label stacked>ID INSTALLATORE</ion-label>
        <ion-input formControlName="ID_INSTALLATORE" type="text"></ion-input>
      </ion-item>
    </form>
  </ion-list>

Answer №1

Make sure to always remember to set your formLoaded flag as true.

You can implement it like this:

this.getAnagrafica().then(() => {
    console.log(this.iobAnagrafica);
    debugger;
    this.formAnagrafica = this.formBuilder.group({
      ID_INSTALLATO: new 
 FormControl(this.iobAnagrafica.id_installato),
      ID_ANAGRAFICA: new FormControl(this.iobAnagrafica.id_anag),
      ID_PRODUTTORE: new 
 FormControl(this.iobAnagrafica.id_produttore),
      ID_GRUPPO: new FormControl(this.iobAnagrafica.id_gruppo),
      ID_INSTALLATORE: new 
 FormControl(this.iobAnagrafica.id_installatore)
      });

      this.formLoaded = true;
   });

Answer №2

I suggest utilizing ngModel in your specific scenario: https://ionicframework.com/docs/developer-resources/forms/ set up a variable in your typescript file

public callBack;
constructor(
  public navCtrl: NavController,
  public navParams: NavParams,
  private privacyProvider: PrivacyProvider,
  private formBuilder: FormBuilder
  ) {

  this.myParam = navParams.get('myParam');

  console.log(this.myParam);

  this.getAnagrafica().then((chart) => {
    this.callBack = chart;
 }
...

once done, the data should populate the fields and you can also utilize the callBack variable for ngIf conditionals

<ion-content>
<ion-list *ngIf="callBack">
<form [formGroup]="formAnagrafica">
  <ion-item>
    <ion-label stacked>ID INSTALLATO</ion-label>
    <ion-input [(ngModel)]="callBack.id_installato" formControlName="ID_ANAGRAFICA" type="text"></ion-input>
  </ion-item>
...

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

The code encountered an error with message TS2345 stating that the argument type '(a: Test, b: Test) => boolean | 1' cannot be assigned to a parameter type of '(a: Test, b: Test) => number'

Apologies for the lengthy subject, but I am having trouble understanding the response. Here is my code snippet: this.rezerwacjeFilteredByseaarchInput.sort(function (a, b) { if (a[5]===null) { // console.log(a[5]); return 1; } ...

Tips on arranging JSON elements based on the sequence of another JSON

Currently, I am facing a challenge with sorting a list of parks (park_list) based on both distance and area. The code snippet below successfully sorts the list by distance: sortList(index){ return function(a, b){ return (a[index] === b[index] ? 0 : ...

What is the best way to retrieve the final value stored?

This is how I am using my Selector:- private loadTree() { this.loading = true; this.store.select(transitionListSelector).pipe().subscribe(data => { console.log(data); data.map(item => { console.log(item); this.tr ...

Challenges arise when working with Angular using ngrx and typescript, particularly when dealing

I'm encountering an issue while working with ngrx. I keep receiving an error when attempting to implement a simple effect. The specific error message mentions that the Argument of type 'MonoTypeOperatorFunction<LoadContainerAction>' is ...

What is the best way to set up TypeScript to utilize multiple node_modules directories in conjunction with the Webpack DLL plugin?

Utilizing Webpack's DllPlugin and DllReferencePlugin, I create a distinct "vendor" bundle that houses all of my main dependencies which remain relatively static. The project directory is structured as follows: project App (code and components) ...

Enhance Typescript with Extension Traits

Picture this scenario: You have a class A with a method that can create an instance of class B. You're unable to make any changes to the code of either A or B, as they are part of an external library. In this situation, if you want to enhance the fun ...

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?

Within my project, some common functions are stored in separate .ts files. Is there a way to incorporate i18n in these cases? // for i18n import Vue from 'vue' declare module 'vue/types/vue' { interface VueConstructor { $t: an ...

Developing a bespoke React Typescript button with a custom design and implementing an onClick event function

Currently, I am in the process of developing a custom button component for a React Typescript project utilizing React Hooks and Styled components. // Button.tsx import React, { MouseEvent } from "react"; import styled from "styled-components"; export int ...

Accessing arrays using bracket notation

When working with TypeScript (or JavaScript), you have the option to access object properties using either dot notation or bracket notation: object.property object['property'] Let's explore a scenario using the latter method: const user = ...

Is there a way to retrieve the ReturnType<T> for all methods within a class, even if the ReturnType<T> and its usage appear to be static?

After extensively reviewing the documentation on typescript at https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypet, I have come across two instances of ReturnType<T> mentioned. However, these instances appear to be statically ...

Transitioning from MVC to Angular 2 and TypeScript: A Step-by-Step Guide

Seeking guidance as I venture into the world of Angular. My goal is to pass a string variable 'element' to my UI and utilize it. However, I am unsure about how to go about passing it inside main.js and beyond. How can I transfer a variable to a t ...

Looking for a solution to resolve the issue "ERROR TypeError: Cannot set property 'id' of undefined"?

Whenever I attempt to call getHistoryData() from the HTML, an error message "ERROR TypeError: Cannot set property 'id' of undefined" appears. export class Data { id : string ; fromTime : any ; toTime : any ; deviceType : string ...

Setting the selected <ion-option> in Ionic 3

Is it possible to programmatically set a default selected option in a dynamically created select menu using Ionic 3 and Angular? I want to make sure "Select State" is automatically chosen if the user hasn't made a selection yet, but I'm having t ...

Utilizing Filters (Pipes) in Angular 2 Components without Involving the DOM Filters

When working in Angular 1, we have the ability to use filters in both the DOM and Typescript/Javascript. However, when using Angular 2, we utilize pipes for similar functionality, but these pipes can only be accessed within the DOM. Is there a different ap ...

I am struggling to delete real-time records in Angular using Firestore

I am facing an issue with my Angular code. I want to be able to delete a record and have it reflect in real-time. When I create a product, it works fine, but deleting the product doesn't work unless I refresh the browser. I'm not sure where the p ...

Custom typings for Next-Auth profile

I'm experiencing an issue with TypeScript and Next Auth type definitions. I followed the documentation guidelines to add my custom types to the NextAuth modules, specifically for the Profile interface in the next-auth.d.ts file. It successfully adds t ...

The ngAfterViewInit lifecycle hook does not get triggered when placed within ng-content

The ngAfterViewInit lifecycle hook isn't triggered for a Component that is transcluded into another component using <ng-content>, as shown below: <app-container [showContent]="showContentContainer"> <app-input></app-input> ...

Ignore verification of unused parameters

In my typescript project compilation process, I make use of the noImplicitAny option to ensure that I specify the types for variables and arguments. However, there are instances where I have unused arguments. For instance: jQuery.ajaxTransport("+*", func ...

Shopping cart development using AngularJS with Ionic Framework

I am currently in the process of developing an online marketplace app. I have successfully implemented the shopping cart functionality, although I am unsure of how to integrate it into my Ionic/AngularJS platform. Are there any resources or solutions avail ...

Using conditional statements to render content based on a certain condition within a

One of my requirements is to dynamically render a React component in the following manner: parent.ts ... <Parent> <Child/> <Parent> ... child.ts ... return (someBoolean && <Component/>) ... While ...