How to access a nested object in another object dynamically?

Question

How to access a nested object in another object dynamically?

Navigation

#1 by (1 votes)

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 do a function to monitor the data that is modified by typing something in the input, taking the id of the input being changed, and modifying the value to the new value typed.

  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 get 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 not understand why. Anyone who can show me the right way to access this object, I thank you very much.

javascript ecmascript-6 react

asked by anonymous 11.08.2017 / 16:35

1 answer

Auto-complete jQuery error with image How to Interrupt setInterval in JavaScript?

score 1 · Accepted Answer

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

Company[targetIdSplit0][targetIdSplit1]

When you had Company[targetIdSplit0].targetIdSplit1 the code would look for a property named targetIdSplit1 in Company[targetIdSplit0] and not the value that the targetIdSplit1 variable saved. That is, the code read targetIdSplit1 as text and not as a variable.