What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Question

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Is there a more efficient way to get all the input values and place them in the appropriate location in my object (localStorage) without having to individually retrieve them as shown in the code below?

Below is the function I currently use to update information:

updateContact() {


    if (this.onSubmit()) {

      this.eleveService.apiUpdateEleve(this.token, this.registerForm.get("firstName").value, this.registerForm.get("lastName").value
      ).subscribe((data: any) => {

        // Retrieve form information
        this.student['contact']['us_firstname'] = this.registerForm.get("firstName").value;
        this.student['contact']['us_lastname'] = this.registerForm.get("lastName").value;
        //  this.language = this.student['us_lang'] 
        this.student['us_lang'] = this.lang
        this.translate.use(this.student['us_lang']);

        // Update the object
        localStorage.setItem("student", JSON.stringify(this.student));
        console.log('updated', this.student)
        this.navCtrl.navigateRoot('/e-tabs/explorer');

      })

    }

  }

This is the structure of my Object :

OBJECT :

contact:
country: {id: "BE", name: "Belgium"}
login: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee828f9d9aae828f9d9ac08c8b">[email protected]</a>"
newsletter: "1"
prest_feedback: "1"
us_address: "Rue des polders 13"
us_city: "Uccle"
us_email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfabbaacab9fabbaacabf1bdba">[email protected]</a>"
us_firstname: "Munir"
us_gsm: "0485001128"
us_id: "5c9b35d8b4dd1"
us_lang: "fr"
us_lastname: "Nahman"
us_zip: "1180"
[Object][1]
[Front-end of the page][2]


  [1]: https://i.sstatic.net/SmxSZ.jpg
  [2]: https://i.sstatic.net/oknZd.jpg

javascript angular typescript ionic-framework

Answer 1

Answer №1

var student = {
   information: {
    name: "hello",
    class: "hello",
    age: "hello",
    gender: "hello",
    number: "hello",
    username: "hello",
    email: "hello",
    home: "hello",
    mobile: "hello"
   }
};

for ( var detail in student.information ) {
  console.log(detail , student.information[detail])
}

This method enables you to access property names and their corresponding values, allowing for further manipulation as needed.

for ( var detail in this.student.information ) { 
    this.student['information'][detail] = this.registerForm.get(detail).value;
}

Answer 2

var student = {
   information: {
    name: "hello",
    class: "hello",
    age: "hello",
    gender: "hello",
    number: "hello",
    username: "hello",
    email: "hello",
    home: "hello",
    mobile: "hello"
   }
};

for ( var detail in student.information ) {
  console.log(detail , student.information[detail])
}

This method enables you to access property names and their corresponding values, allowing for further manipulation as needed.

for ( var detail in this.student.information ) { 
    this.student['information'][detail] = this.registerForm.get(detail).value;
}

Answer 3

Answer №2

To efficiently store key-value pairs, consider stringifying the entire object and saving it in your localStorage.

localStorage.setItem('contactObject', JSON.stringify(yourObject));

Retrieving the object from localStorage is as simple as parsing it back into an object.

const retreivedContactObject = JSON.parse(localStorage.getItem('contactObject'));
console.log(retreivedContactObject);

For easier handling, ensure that your registerForm FormControl names match those of your student object.

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  .
  .

student = {
  contact: {
    custName: undefined,
    custAddress: undefined,
    custTown: undefined,
    .
    .
  }
};

constructor(private formBuilder: FormBuilder) { }

registerForm: FormGroup = this.formBuilder.group({
  custName: [null, Validators.required],
  custAddress: [null, Validators.required],
  custTown: [null, Validators.required],
    .
    .
},

Once your formControls align with your student object's properties,

you can update your student using:

this.student.contact = {...this.registerForm.value};
//console.log(this.student);

Answer 4

To efficiently store key-value pairs, consider stringifying the entire object and saving it in your localStorage.

localStorage.setItem('contactObject', JSON.stringify(yourObject));

Retrieving the object from localStorage is as simple as parsing it back into an object.

const retreivedContactObject = JSON.parse(localStorage.getItem('contactObject'));
console.log(retreivedContactObject);

For easier handling, ensure that your registerForm FormControl names match those of your student object.

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  .
  .

student = {
  contact: {
    custName: undefined,
    custAddress: undefined,
    custTown: undefined,
    .
    .
  }
};

constructor(private formBuilder: FormBuilder) { }

registerForm: FormGroup = this.formBuilder.group({
  custName: [null, Validators.required],
  custAddress: [null, Validators.required],
  custTown: [null, Validators.required],
    .
    .
},

Once your formControls align with your student object's properties,

you can update your student using:

this.student.contact = {...this.registerForm.value};
//console.log(this.student);

What is the best way to capture the inputs' values and store them accurately in my object within localStorage?

Answer №1

Answer №2

Similar questions

Issue with Swiper js "autoheight" not resizing correctly for the height of the first slide upon page initialization

CSS: Problem Arising from Line Connections Between Tree Elements

Produce configuration files on the fly for Angular Component Testing using @Component declarations

Unable to remove the necessary row with Angular.js/JavaScript

RouterLink causing component not to reload

Using JavaScript to place a particular tag at a designated position

Issue with Angular 8 Material: mat-option remains unselected after update

Chrome experiences a crash during regular expression matching operations

What is the best way to incorporate a routerLink in an HTML string?

Guide on setting a v-model within a v-for loop (using an example from Bootstrap Vue)

Is there a way to dynamically switch between AngularJS modules based on a configuration change?

Tips for managing the output of an asynchronous function in TypeScript

What is the best way to include an external JavaScript file in a Bootstrap project?

Ways to display spinner animations during image loading on Next.js?

Adding new data to a Chart.js line graph in vue on form submission - A step-by-step guide

Double invocation of useEffect causing issues in a TypeScript app built with Next.js

What is the best way to assign Reference Identification numbers to the orders?

When using Firefox to run an Angular dev server with the --ssl flag, an error with the code SEC_ERROR_INADEQUATE_KEY

Obtain every possible sequence of US phone number segments for a provided number

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?