Saving form data to local storage but unable to reterive it/

then your problem is not in the code you show

it is in the code that binds the variables to the form

My html

<ion-content padding text-wrap>
  <div>
    <ion-card class="bgcol">
      <ion-card-header text-center>
        Section I - Customer Details
      </ion-card-header>
      <ion-card-content>
        <ion-list class="bGcol">
          <ion-item class="itembg">
            <ion-label stacked style="color:black">Full Name of School:</ion-label>
            <ion-textarea [(ngModel)]="schoolName" style="background-color: whitesmoke"></ion-textarea>
          </ion-item>
          <ion-item class="itembg">
            <ion-label stacked style="color:black">Postal Address With Pin Code for Mailing:</ion-label>
            <ion-textarea [(ngModel)]="addRess" style="background-color: whitesmoke"></ion-textarea>
          </ion-item>
          <ion-item class="itembg">
            <ion-label stacked style="color:black">Direction To Reach The School (Name Of The Nearest Station/Town) And Distance:</ion-label>
            <ion-textarea [(ngModel)]="direcTion" style="background-color: whitesmoke"></ion-textarea>
          </ion-item>
          <ion-item class="itembg">
            <ion-label stacked style="color:black">Google Map Location (If Available):</ion-label>
            <ion-textarea [(ngModel)]="mapLoc" style="background-color: whitesmoke"></ion-textarea>
          </ion-item>
          <ion-item class="itembg">
            <ion-label stacked style="color:black">Type of School:</ion-label>
            <ion-select [(ngModel)]="schoolType" style="background-color: whitesmoke">
              <ion-option value="gov">Govt</ion-option>
              <ion-option value="govAid">Govt Aided</ion-option>
              <ion-option value="govSpon">Govt Sponsored</ion-option>
              <ion-option value="pvt">Private</ion-option>
            </ion-select>
            </ion-item>
            <ion-item class="itembg">
              <ion-label stacked style="color:black">Type of School:</ion-label>
              <ion-select [(ngModel)]="typeSchool" style="background-color: whitesmoke">
                  <ion-option value="gov">Secondary</ion-option>
                  <ion-option value="govAid">Higher Secondary</ion-option>
                  </ion-select>
            </ion-item>
        </ion-list>
      </ion-card-content>
    </ion-card>
    <div style="text-align:center">
        <button ion-button small (click)="saveSecI();">Save</button>
        <button ion-button small (click)="gotoSecII();">Next</button>
    </div>
  </div>

</ion-content>

my ts

export class SecOnePage {
  schoolName: any;
  addRess: any;
  direcTion: any;
  mapLoc: any;
  schoolType: any;
  typeSchool: any;


  sec1={

SchoolName: '',
Address: '',
Direction:'',
MapLoc:'',
SchoolType:'',
TypeSchool:'',

  }
  pdfObj = null;

  constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController, private platform: Platform, private file: File, private fileOpener: FileOpener) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SecOnePage');

    if (localStorage.getItem('stat') == '0') {
      var sec1 = JSON.parse(localStorage.getItem("sec1"));
      this.schoolName = sec1.SchoolName;
      this.addRess = sec1.Address;
      this.direcTion = sec1.Direction;
      this.mapLoc = sec1.MapLoc;
      this.schoolType = sec1.SchoolType;
      this.typeSchool = sec1.TypeSchool;

    }
  }


  saveSecI() {
    localStorage.setItem('stat', '0');
    var sec1 = [
      {
        "SchoolName": this.schoolName
      },
      {
        "Address": this.addRess
      },
      {
        "Direction": this.direcTion
      },
      {
        "MapLoc": this.mapLoc
      },
      {
        "SchoolType": this.schoolType
      },
      {
        "TypeSchool": this.typeSchool
      },


    ];


    // Or to get a key/value pair
    localStorage.setItem("sec1", JSON.stringify(sec1));
    // sec1 = JSON.parse(localStorage.getItem("sec1"));
  }
  gotoSecII(){
    //  console.log(sec1);
      var docDefinition = {
        content: [
          
          { text: this.schoolName, style: 'story', margin: [0, 20, 0, 20] },
          { text: this.addRess, style: 'story', margin: [0, 20, 0, 20] },
          { text: this.direcTion, style: 'story', margin: [0, 20, 0, 20] },
          { text: this.mapLoc, style: 'story', margin: [0, 20, 0, 20] },
          { text: this.schoolType, style: 'story', margin: [0, 20, 0, 20] },
          { text: this.typeSchool, style: 'story', margin: [0, 20, 0, 20] },
     
     
        ],
        styles: {
          story: {
            italic: true,
            alignment: 'center',
            width: '50%',
          }
        }
      }
      this.pdfObj = pdfMake.createPdf(docDefinition);
      if (this.platform.is('cordova')) {
        this.pdfObj.getBuffer((buffer) => {
          var blob = new Blob([buffer], { type: 'application/pdf' });
   
          // Save the PDF to the data Directory of our App
          this.file.writeFile(this.file.dataDirectory, 'myletter.pdf', blob, { replace: true }).then(fileEntry => {
            // Open the PDf with the correct OS tools
            this.fileOpener.open(this.file.dataDirectory + 'myletter.pdf', 'application/pdf');
          })
        });
      } else {
        // On a browser simply use download!
        this.pdfObj.download();
    //   }
    let loading = this.loadingCtrl.create({
        content: 'Please wait...'
   });
  
    loading.present();


     loading.dismiss();




     this.navCtrl.push(SecTwoPage);
  
  }

  }
}

localStorage considered harmful. Also, you are lazily abusing any. You know what the types of all of those things are; declare them.

It is just for testing purpose. So yes I’m abusing it :joy:
And I’m getting the value but unable to display it on the form after killing and serving it again.

What does it exactly show?

There is quite some horror going on in terms of typing and object definition, besides using localStorage. Not sure if that solves your issue, except that a different coding discipline/rigor would not have brought you in this position.

I would try to put {{typeSchool}} in the html to see if the value is actually bound. The [(ngModel)] bindings seem according to specification.

Just a matter of removing code until you have something that works and then slowly build it up again.

Ok let me show you an example.

Ugh. This attitude disgusts me so much. I think it is time for another extended break.

I understand some people at some times might not care about code quality so much. I think they’re wrong, but I acknowledge why they do it. When it comes to asking advice of volunteers, if you can’t bothered to do the best that you absolutely can as a questioner, why would you expect anybody to want to help you? More importantly, the prevalence and tolerance of garbage “do my homework/write my app” threads here crowds out legitimate community support discussions.

input:

Output:

True, but that is why I choose not to answer in many cases and set my expectations to the lowest possible… If apparently people feel no obstacle to investigate then I don’t feel an obstacle not to respond.

But that is off topic…

The data seems to be stored in an array (with 14 elements). So you need to reference to the relevant array item.

Lots of learnings for you, my friend. But once you are there, it is going to be even more fun to code

Signing off. Got to do some work

Bro you are taking it in a wrong way. previously also you did and now also.
I already told you I like your solutions but try be cool and relax.

Thanks for your help and replies.
Have a nice day ahead.

Congratulations. You could not possibly have written a more effective comment in terms of demotivating me to participate here.

See you whenever, everybody who I respect. This isn’t working for me.

1 Like

I’m not demotivating anybody here, I just asked you to relax don’t bother about the code and about people who codes in a different way.
Everyone is different in their own terms.
I’m here to get myself clear & truthfully I’m a beginner who is trying to learn from videos and forums like this, what you expect, a expert asking for help here??
I’ll improve surely, but only if you senior guys are there to help!!
Where would we go and ask for help??
So I request you not to take it the wrong way!!

@rapropos Probably just has a bad day. Everyone is triggered once in a while.

With that said:

  1. install sqlite: ionic cordova plugin add cordova-sqlite-storage.
  2. install the storage module: npm install --save @ionic/storage.
  3. Add it to your project:
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

Then use it in your home.ts like this:

import { Component } from '@angular/core';
import { IonicPage, Platform } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  schoolInfo: SchoolInformation;

  constructor(public plt: Platform,
              public storage: Storage) {
    this.schoolInfo = this.initSchoolInfoValues();
    this.plt.ready().then((res) => {
      this.loadSchoolInfoValues().then(data => {
        if(data) this.schoolInfo = data;
      }).catch(err => console.log(err));
    }).catch(err => console.log(err));
  }

  private initSchoolInfoValues(): SchoolInformation {
    return {
      schoolName: '',
      direction: '',
      address: ''
    }
  }

  private loadSchoolInfoValues(): Promise<SchoolInformation> {
    return this.storage.get(STORAGE_SCHOOLINFO);
  }

  private saveSchoolInfoValues(data): Promise<any> {
    return this.storage.set(STORAGE_SCHOOLINFO, data);
  }
}

interface SchoolInformation {
  schoolName: string;
  direction: string;
  address: string;
  // TODO: Add all the other values that you need here typecasted.
  // Also extend all the other functions to cover your needs.
}

const STORAGE_SCHOOLINFO = "storageSchoolInfo";

And your home.html can look something like this:

<ion-header>
  <ion-navbar>
    <ion-title>
      School Info Page
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label color="primary">
        School name:
      </ion-label>
      <ion-input placeholder="School" [(ngModel)]="schoolInfo.schoolName">
      </ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary">
        Direction:
      </ion-label>
      <ion-input placeholder="Direction" [(ngModel)]="schoolInfo.direction">
      </ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary">
        Address:
      </ion-label>
      <ion-input placeholder="Address" [(ngModel)]="schoolInfo.address">
      </ion-input>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <button ion-button full (click)="saveSchoolInfoValues(schoolInfo)">
    Save School Info
  </button>
</ion-footer>

I didn’t give your everything, so that you have to figure some stuff out for yourself.

Notice that that is what triggered Robert. Most experienced Developers hate it when people don’t do enough research and just post their questions without thinking. (I don’t know if you did enough research, to me it seemed like you very genuinely stuck which is why I try to help you).

Also notice that I used some ‘advanced’ concepts like an interface. Educate your self on this. And lastly I would put my logic in a provider. So instead of having all these functions in home.ts I would delegate it to a couple of providers (and a constants.ts file for the constant at the bottom).

If you want to have a look at an advanced Ionic project google for “Ionic Mosum”. It’s a wheather app written in Ionic and you can learn a ton from it.

Furthermore if you are willing to spend money, check out the courses by @joshmorony. They are great!

2 Likes

Thank you @Hesters I have done research and am stuck from past 4-5 days. I’ll try to figure the above.
And surely I’m on my way to get better just by learning from you guys.
And I’ve seen Josh and his videos, it’s very helpful for beginners like us.
Thanks again for considering my problem a genuine one.
Have a nice day!!

1 Like

And surely I’m on my way to get better

What really helps me is building the code from the bottom slowly adding stuff small pieces at a time and continuously check if the code still works. And if not, revert and slice the piece I added. This way checking all my assumptions. If I add big chunks, then these are chunks were tested by myself before.

And if I am lost, I start a blank project and add the “offending” code to see how it works.

Takes a while, but taught me a lot

2 Likes

This is a great approach to code clean and code clear.
I’ll follow that for sure!

Besides thinking that you developers are giants among us, and so helpful, it is also great fun to see when you all get a little irritated. Adds some fire, and makes my day.:laughing:

From a novice with no idea of coding.

1 Like