Constructing object array using dynamic keys in react/Javscript

Question

I tried to contrcut the object based on response coming from API.

my key is assigned this.RootKeyValue and my response is assigned to this.keyResponse

this.RootKeyValue is the key of parent of first object .

In second object based on the DynamicKey value need to create the key and values .

this.RootKeyValue = "AccountDetails";
          
this.keyResponse = 
[ 
    {ICICI: 2,DynamicKey: "ICICI"},
    {SBI: 1.25,DynamicKey: "SBI"}
    {HDFC: 1.75,DynamicKey: "HDFC"}
]

how to construct the object like below using above key and response.
Expected result :

{ 
   AccountDetails : 
    { ICICI :2 , SBI: 1.25,HDFC: 1.75 } 
}

I am new to react please suggest how to construct object using the dynamic key values

Jamiec · Accepted Answer · 2021-02-15 11:13:59Z

2

You build a dynamic object using square bracket notation

const obj = { ["SomeDynamicKey"]: someValue }

So in your case you can use reduce to build the object from your array:

this.RootKeyValue = "AccountDetails";
          
this.keyResponse = 
[ 
    {ICICI: 2,DynamicKey: "ICICI"},
    {SBI: 1.25,DynamicKey: "SBI"},
    {HDFC: 1.75,DynamicKey: "HDFC"}
]   

const result = {
  [this.RootKeyValue] : this.keyResponse.reduce( (acc,item) => ({
    ...acc, 
    [item.DynamicKey]: item[item.DynamicKey]})
  ,{})
}

console.log(result)

edited Feb 15, 2021 at 11:13

answered Feb 15, 2021 at 11:07

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prakash S Over a year ago

While this.RootKeyValue is hardcoded, the above block uses too many computed values. also reduce is a overkill for this scenario as there are no complicated computation on a single item.

Jamiec Over a year ago

@PrakashS what are you talking about? This gives exactly the result the OP asked for, with just the right amount of dynamic values. WHatever do you mean by "overkill"? reduce is undoubtably the right tool for this job as its turning an array into a single object which is exactly what reduce does!

sazzad · Accepted Answer · 2021-02-15 11:24:12Z

0

As the give array already has the dynamic keys and associate value in same object , you can create your desired object very easily like this.

let given =   [ 
    {ICICI: 2,DynamicKey: "ICICI"},
    {SBI: 1.25,DynamicKey: "SBI"},
    {HDFC: 1.75,DynamicKey: "HDFC"}
] , AccountDetails = {};


given.forEach(item => {
  AccountDetails[item.DynamicKey] = item[item.DynamicKey] ? item[item.DynamicKey] : ''; 
})

console.log(AccountDetails);

edited Feb 15, 2021 at 11:24

answered Feb 15, 2021 at 11:19

sazzad

5254 silver badges5 bronze badges

1 Comment

costaparas Over a year ago

The community encourages adding explanations alongisde code, rather than purely code-based answers (see here).

Fatih Turgut · Accepted Answer · 2021-02-15 11:52:23Z

0

You can use square brackets to handle this very easily, e.g.

const key = 'DYNAMIC_KEY';
const obj = { [key]: 'value' };

const RootKeyValue = "AccountDetails";
const keyResponse = [ 
    { ICICI: 2,DynamicKey: "ICICI" },
    { SBI: 1.25,DynamicKey: "SBI" },
    { HDFC: 1.75,DynamicKey: "HDFC" }
];

const newData = { [RootKeyValue]: {} };
keyResponse.forEach(item => {
  newData[RootKeyValue][item.DynamicKey] = item[item.DynamicKey];
})

console.log(newData)

edited Feb 15, 2021 at 11:52

answered Feb 15, 2021 at 11:16

Fatih Turgut

3414 silver badges11 bronze badges

Collectives™ on Stack Overflow

Constructing object array using dynamic keys in react/Javscript

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related