Transferring the storage value to an Ionic 2 object

Extracting information from storage in Ionic 2.

        this.storage.get('name').then((nama) => {
            this.name = nama
        });

Now, I am trying to assign the extracted data "this.name" to an object. However, upon running the app, no data is being returned.

    this.userData = {
        id: '0404040404',
        nama: this.name,
        no_hp: '082211590346',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9abb0bfa8a0a3b8bab2a0b899beb4b8b0b5f7bab6b4">[email protected]</a>'
    }

Below is my complete code snippet.

name:any
userData: {id: string, nama: string, no_hp: string, email: string}

constructor(public navCtrl: NavController,public storage: Storage) {

        this.storage.get('name').then((nama) => {
            this.name = nama
        });

    this.userData = {
        id: '0404040404',
        nama: this.name,
        no_hp: '082211590346',
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f1d06091e16150e0c04160e2f08020e0603410c0002">[email protected]</a>'
    }
}

Answer №1

Initialize userData within the promise's result:

constructor(public navCtrl: NavController, public storage: Storage) {

        this.storage.get('name').then((name) => {
            this.name = name;
            this.userData = {
                id: '0404040404',
                name: name,
                phone_number: '082211590346',
                email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6012090611191a01030b190120070d01090c4e030f0d">[email protected]</a>'
            }
        });

}

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

Guide on initiating document-wide events using Jasmine tests in Angular 2/4

As stated in the Angular Testing guidelines, triggering events from tests requires using the triggerEventHandler() method on the debug element. This method accepts the event name and the object. It is effective when adding events with HostListener, such as ...

What could be causing the radio button to not be checked when the true condition is met in Angular?

I am working on an angular7 application that includes a dropdown list with radio buttons for each item. However, I am facing an issue where the radio button is not checked by default on successful conditions. Below is the code snippet from my component.htm ...

Issue with TypeScript in Vue3: Unable to access computed property from another computed property

In my Vue3 project with TypeScript, I am encountering an issue where I am unable to access the properties of the returned JavaScript object from one computed property in another computed property using dot notation or named indexing. For instance, when tr ...

Establish a connection between an Angular client and a Spring backend using JWT for authentication

I successfully integrated JWT into my Spring backend by following the steps outlined in this informative guide: https://auth0.com/blog/securing-spring-boot-with-jwts/ Interestingly, when I perform a PUT request using Postman, everything seems to be workin ...

What is the process for retrieving a string value from a URL?

Here is the link to my page: http://localhost:4200/#/home/jobmanager/status Can someone help me figure out how to extract the "status" from the URL as a string in TypeScript (.ts file)? For example: this.getJobs("STATUS_HERE"); I need to replace "STATU ...

The Angular 2 http request seems to be failing to reach the web api's get method when using a string parameter overload

Issue at hand is that the initial Get method gets triggered by this particular HTTP request: http://localhost:56690/api/testelements/?name=aeg One would anticipate the second (string overload) method to be invoked due to the presence of a string parameter ...

Unable to iterate over property in Angular 6 after receiving response

Recently, I started working with Angular and encountered an issue while trying to loop through a property in the component file. I kept receiving an error message stating that the property length is undefined. Check out this screenshot from Chrome DevTool ...

How do I disable split panel on Ionic 2 login page exclusively?

I have successfully implemented the split-pane feature in my app.html file. However, I am facing an issue where the split pane is being applied to every page such as login and SignUp. Can someone please guide me on how to restrict the split pane function ...

What is the best way to refresh NGRX data?

There are two models in a one-to-many relationship: export interface GroupModel { id: number; name: string; userIds?: number[]; } export interface UserModel { id: number; name: string; groupId?: number; } An issue arises when updating either m ...

Creating custom typings in a typings.d.ts file does not address the issue of importing a JavaScript library

I'm attempting to integrate the Parse-server JS sdk into an angular 8 application, but no matter what approach I take, I encounter errors. Here is what I have tried: Creating custom typings.d.ts files with declare var parse: any; Installing the @ty ...

Angular 10 encounters difficulties when attempting to execute HttpClient

I encountered an error when attempting to execute "ng build". The error message states: ERROR in node_modules/@angular/common/http/http.d.ts:81:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. ...

What is the reason for the typescript check failing?

When attempting to check for the existence of an attribute using if statement, I encountered an error. Can anyone explain why this happened? I would appreciate any insights on this issue. ...

Some variables are needed but not provided (please use: --variable APP_DOMAIN=value --variable PAGE_LINK_DOMAIN=value)

I'm trying to set up Firebase Dynamic Links. Following the documentation instructions, I encountered the following error. Any tips on how to determine the values for my app? APP_DOMAIN and PAGE_LINK_DOMAIN I want to generate dynamic links programmat ...

Certain Material-UI components appear to lack proper styling

I found a tutorial on how to incorporate material UI into my app at this link: https://mui.com/material-ui/getting-started However, I noticed that some components are not styled as expected and customizing the theme seems to have no effect... This is how ...

What is the process of creating a typeorm relationship between orders and products?

My Orders Entity file in TypeOrm looks like this: @Entity('orders') export class OrdersEntity { @PrimaryGeneratedColumn('uuid') id: string; @CreateDateColumn() created: Date; @UpdateDateColumn() updated: Date; @Column('t ...

Resetting the datetime-local input to its initial value (ngModel) in template forms

In my Angular 6 template form, the user can modify the date/time in the datetime-local input after loading it with the latest data. However, I am struggling to reset the input back to the original date/time (loaded from array "one.classTimesLogOffRevised") ...

Screen a roster for shared elements with another roster

Within my dataset, I am working with a List of Objects that adhere to the following Model structure: export class Animal{ public aniId: number; public aniName: string; } export Class Zoo{ public id: number; public name:string; public aniId: number ...

The feature of "compile on save" is not functioning properly in my current Angular project

Yesterday I used the angular cli (ng new my-app) to create a new project, but unfortunately the "compile on save" option is not functioning properly. Interestingly, I have two projects on my computer and this feature works fine for one of them but not for ...

having issues establishing a connection between Django and Angular 2

I'm facing an issue with connecting my Angular 2 app to Django because they are running on different servers. I tried using cors but it didn't work. Any suggestions for a simple way to make the connection between them? views.py # Home Page d ...

How can I collaborate on a component in Angular?

I'm currently developing an Angular application that utilizes a map feature powered by the Google Maps API. What I aim to achieve is the ability to freely move around the map to locate specific places, add markers, as well as edit existing markers, am ...