How to access an object nested in another object dynamically?

Asked

Viewed 296 times

1

I have the following JSON

{
   "Id":"ssjsjs",
   "Name":"STFksks S.A",
   "Alias":"STF jnsns S.A",
   "DocumentId":"010101",
   "Accounts":[
      "hahadkjkjteste"
   ],
   "CountryCode":"BRA",
   "Country":"Brasil",
   "Address":{
      "PostalCode":"222222",
      "Street":"Largo dos Leões",
      "State":"RJ",
      "City":"Rio de Janeiro",
      "Country":"Brazil",
      "Number":"200",
      "Complement":"",
      "Neighborhood":"Humaitá",
      "AddressType":"Comercial"
   },
   "TestContracts":[
      {
         "Name":"Teste nome",
         "Email":"[email protected]",
         "Phone":"55219999999",
         "PhoneCountry":{
            "DialCode":"55",
            "Format":"+..-..-....-....",
            "Iso":null
         }
      },
      {
         "Name":"hsshsh",
         "Email":"teste2.teste",
         "Phone":"5521981660129",
         "PhoneCountry":{
            "DialCode":"55",
            "Format":"+..-..-....-....",
            "Iso":null
         }
      },
      {
         "Name":"hahah",
         "Email":"[email protected]",
         "Phone":"552121212122",
         "PhoneCountry":{
            "DialCode":"55",
            "Format":"+..-..-....-....",
            "Iso":null
         }
      },
      {
         "Name":"Gus",
         "Email":"[email protected]",
         "Phone":"33333333",
         "PhoneCountry":{
            "DialCode":"55",
            "Format":"+..-..-....-....",
            "Iso":null
         }
      }
   ],
   "PaymentType":0,
   "PaymentStatusChangeDate":"2017-08-05T14:24:32.6503311Z",
   "PaymentStatus":0,
   "InscricaoMunicipal":"002",
   "InscricaoEstadual":"",
   "UnblockPaymentStatusRequest":"",
   "WillBlockAt":"",
   "Tier":"",
   "ChargeStrategy":"Active",
   "Address.PostalCode":"2226021"
}

I make a function to monitor the data that is modified by typing something into the input, taking the id of the input that is being changed, and modifying the value for the new entered value.

  handleInputChange(event) {
    const { Company } = this.state
    Company[event.target.id] = event.target.value
    this.setState({ Company: Company })
  }

But when I try to access the properties of the object Address as follows, I receive Undefined:

 handleInputChange(event) {
    const { Company } = this.state
    const targetId = event.target.id

    if (targetId.includes('.')) {
      const targetIdSplit = targetId.split('.')
      const targetIdSplit0 = targetIdSplit[0]
      const targetIdSplit1 = targetIdSplit[1]
      console.log(Company[targetIdSplit0].targetIdSplit1)
    }
  }

I can’t understand why. Who can show me the right way to access this object, I thank you very much.

javascript react ecmascript-6
  • 1

    You have to use [] for targetIdSplit1 also, to have two levels of dynamic keys: Company[targetIdSplit0][targetIdSplit1]. If not, it gives an example of event.target.id.

  • 1

    @Sergio, it worked. Thank you again. S2

1 answer

2


You have to use [] for targetIdSplit1 also, to have two levels of dynamic keys: 

Company[targetIdSplit0][targetIdSplit1]

When you had Company[targetIdSplit0].targetIdSplit1 the code would look for a name property targetIdSplit1 in Company[targetIdSplit0] and not the value that the variable targetIdSplit1 guarded. Or read the code targetIdSplit1 as text and not as a variable.

Browser other questions tagged javascript react ecmascript-6

You are not signed in. Login or sign up in order to post.