Assign values from a html form to a nested javascript object

Question

I have a property details which is a nested object. On clicking sign-in i get a form object which has values i want to set the values from the form into the nested object. Why cannot we use the normal .(dot) operator or the [] to chain and access the nested objects and their properties.

export class AppComponent {

    details:{
        city:string,
        dates:{
          date:Date,
          data:{
            name:string,
            comment:string
          }[]
        }[]
      }

     // this function is executed on submit of the form 

     onSignin(form:NgForm){

       console.log(form)
       this.details.city=form.value.city; // cannot set property 'city' of undifined
        console.log(this.details)
    }

}

stackoverflow.com/questions/44916365/… looks different to me. — Matt McCutchen
– Matt McCutchen, Commented Oct 9, 2018 at 6:17

codingsplash · Accepted Answer · 2018-10-09 06:21:25Z

I dont see any problem with your structure or code. It is possible that you may not be assigning the value correctly.

The below code gives me the correct output:

class Example {
  details: {
    city: string,
    dates: {
      date: Date,
      data: {
        name: string,
        comment: string
      }[]
    }[]
  } = {
      city: "Tokyo",
      dates: [
        {
          date: new Date(),
          data: [
            {
              name: "Stackoverflow",
              comment: "Hi"
            }
          ]
        }
      ]
    }


  getDetails() {
    console.log(this.details.city)
    this.details.city = "Hong Kong";
    console.log(this.details.city)
  }
}

new Example().getDetails();

This first prints "Tokyo" and then "Hong Kong". You have just defined details as variable and not assigned any value. Since details is currently undefined, you cannot directly set the value of only one its nested objects. You can set value for city, if details was assigned to any non null value.

Matt McCutchen · Accepted Answer · 2018-10-09 06:22:01Z

0

As the error message suggests, this.details is undefined. You need to create the object before you can set its properties. For example:

// A cast is required because `this.details` doesn't yet have the required properties.
this.details = {} as any;
this.details.city = form.value.city;
// ...

Or use an object literal instead of setting individual properties:

this.details = {city: form.value.city, dates: [ /*...*/ ]};

answered Oct 9, 2018 at 6:22

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Collectives™ on Stack Overflow

Assign values from a html form to a nested javascript object

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related