CODEWITHSUNDEEP
javascriptreactjs
Kristoffer Tølbøll
Kristoffer Tølbøll

Reputation: 3327

Create dynamic key value pairs for objects in list js

I have an array of arrays with the following structure:

[
   [ {"key": someKey, value: "someValue"}, 
     {key: someOtherKey, value: "someOtherValue} ],
   [ {"key": someKey, value: "someValue"}, 
     {key: someOtherKey, value: "someOtherValue} ],
]

I want to transform this structure into a list of object with dynamic keys and values like such:

[{someKey: someValue}, {someOtherKey: someOtherValue}]

So far i have this code

      const serializedData = data.map(entry =>{
            console.log(entry)
            return entry.reduce(
                (obj, item) => {
                    return Object.assign(obj, { [item.key]: item.value })
                }) 
    })

But this only serializes the keys for the first entry (i have provided image examples below), can anybody help me to create the correct dataformat?

Upvotes: 1

Views: 816

Answers (4)

Yousaf
Yousaf

Reputation: 29282

You could flatten the array and then map over it to get the values in each object and create a new object from those values using Object.fromEntries() function

const arr = [
   [ {"key": 'someKey1', value: "someValue1"}, {key: 'someOtherKey2', value: "someOtherValue2"} ],
   [ {"key": 'someKey3', value: "someValue3"}, {key: 'someOtherKey4', value: "someOtherValue4"} ],
];

const result = arr.flat().map(({key, value}) => Object.fromEntries([[key, value]]));

console.log(result);
.as-console-wrapper{min-height:100% !important; top: 0; }

You could also pass the result of Object.values() function to Object.fromEntries() function to create the object.

const arr = [
   [ {"key": 'someKey1', value: "someValue1"}, {key: 'someOtherKey2', value: "someOtherValue2"} ],
   [ {"key": 'someKey3', value: "someValue3"}, {key: 'someOtherKey4', value: "someOtherValue4"} ],
];

const result = arr.flat().map(obj => Object.fromEntries([Object.values(obj)]));

console.log(result);
.as-console-wrapper{min-height:100% !important; top: 0; }

Upvotes: 2

Hassan Imam
Hassan Imam

Reputation: 22534

You can use array#flat and array#map.

const arr = [ [{ "key": 'someKey1', value: "someValue1" }, { key: 'someOtherKey2', value: "someOtherValue2" } ], [{ "key": 'someKey3', value: "someValue3" }, { key: 'someOtherKey4', value: "someOtherValue4" } ], ],
      result = arr.flat().map(({key, value}) => ({[key]: value}));
console.log(result);
.as-console-wrapper{min-height:100% !important; top: 0; }

Upvotes: 2

Sven.hig
Sven.hig

Reputation: 4519

You can use Map to create the objects and then make objects from it

kvp=[
  [ {key: "someKey", value: "someValue"}, 
    {key: "someOtherKey", value: "someOtherValue"} ],
  [ {key: "someKey", value: "someValue"}, 
    {key: "someOtherKey", value: "someOtherValue"} ],
].flat()
      

result=[]
kvp.forEach(o=>{
  map=new Map([Object.values(o)])
  objx = Object.fromEntries(map)
  result.push(objx)
})
console.log(result)

Upvotes: 0

Kharel
Kharel

Reputation: 827

const data = [
  [{
      key: "k01",
      value: "v01"
    },
    {
      key: "k02",
      value: "v02"
    }
  ],
  [{
      key: "k11",
      value: "v11"
    },
    {
      key: "k12",
      value: "v12"
    }
  ],
];

const newData = data
  .flat()
  .reduce(
    (acc, {
      key,
      value
    }) =>
    Object.assign(acc, {
      [key]: value
    }), {}
  )

console.log(newData);

Upvotes: 1

Related Questions