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

jQuery Load - Oops! There seems to be a syntax error: Unexpected token <

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

How can I combine my two ngIf conditions into an ngIf else statement?

Utilize the Google Drive API to easily upload an Excel file

Do I have to include reject() in the executor when using promises in express.js?

Ensuring TypeScript recognizes a class property as definitively initialized when set using a Promise constructor

Creating an Account with Firebase

JQuery function fails to execute upon first page load

Issue with Mongoose Promise failing to transfer data to the following chain

The Access-Control-Allow-Origin policy does not permit requests from applications running with an origin of null, specifically for those using a file:// URL

A solution for managing MUI data grid rows and columns using useRef to prevent infinite loops when handling onSortModelChange

How to implement a feature for uploading multiple files through a single form with unique input fields in a web

Unable to retrieve JSON data in Angular2 as expected

Accessing a property's value from a different property within a Class' initialization function

Removing a specific item from a Kendo UI dropdown list

What could be the reason for the unexpected outcome when checking if display is equal to "none"?

Acquire Formik Validation for the Current Year and Beyond

Implementing dynamic component swapping in Vue 3 using components from another component

What is the reason behind not being able to utilize addEventListener on a variable that has been selected through DOM's getElementsByClassName method?

`Switching the selection in ng-selected`