Javascript Object conversion

Question

The data array has 3 objects each with 3 keys i.e. key, city and fair. Now I want to destructor in such a way that city and fair get segregated in separate JS objects (as per given below)

How can I make such conversions?

Input

const data = [
 {
 "key": 1,
 "city": "Delhi",
 "fair": 4500
 },
 {
 "key": 2,
 "city": "Ahmedabad",
 "fair": 2500
 },
 {
 "key": 3,
 "city": "Mumbai",
 "fair": 5000
 }
];

Expected output

const city = [
 {
 "key": 1,
 "value": "Delhi"
 },
 {
 "key": 1,
 "value": "Ahmedabad"
 },
 {
 "key": 1,
 "value": "Mumbai"
 }
];
const fair = [
 {
 "key": 1,
 "value": 4500
 },
 {
 "key": 1,
 "value": 2500
 },
 {
 "key": 1,
 "value": 5000
 }
];

Answer 1

You can use an Array#reduce() call to accumulate each property into an individual array.

If you know the keys you will be grouping by in advance you can declare them in the initial accumulator and call them explicitly.

const input = [{ "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 }];
const { city, fair } = input.reduce((acc, { key, city, fair }) => {
 acc.city.push({ key, value: city });
 acc.fair.push({ key, value: fair });
 return acc;
}, { city: [], fair: [] });
console.log(city);
console.log(fair);

.as-console-wrapper { max-height: 100% !important; top: 0; }

But if you have a large number of properties you might want a more dynamic option, here separating the key and iterating the Object.entries() of any remaining properties and grouping them by key in the accumulator.

const input = [{ "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 }];
const { city, fair } = input.reduce((acc, { key, ...data }) => {
 Object.entries(data).forEach(([prop, value]) => {
 (acc[prop] ??= []).push({ key, value });
 });
 return acc;
}, {});
console.log(city);
console.log(fair);

.as-console-wrapper { max-height: 100% !important; top: 0; }

• VLAZ: When reducing into object with known keys, it's easier to just set the initial value to what you expect: { city: [], fair: []} - then you don't need any conditionals in the reducer function.
• pilchard: My initial answer did, but I decided to offer a more dynamic option.

Answer 2

Create a pair of simple data constructors and map over the array:

const data = [ { "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 } ];
const City = ({key, city: value}) =>
 ({ key, value });
 
const Fair = ({key, fair: value}) =>
 ({ key, value });
const city = data.map(City);
const fair = data.map(Fair);
//more compact display
for (const c of city)
 console.log(JSON.stringify(c));
console.log("-----");
for (const f of fair)
 console.log(JSON.stringify(f));

.as-console-wrapper {
 max-height: 100% !important;
}

Or go over the source array once with a loop and fill in both output arrays:

const data = [ { "key": 1, "city": "Delhi", "fair": 4500 }, { "key": 2, "city": "Ahmedabad", "fair": 2500 }, { "key": 3, "city": "Mumbai", "fair": 5000 } ];
const City = ({key, city: value}) =>
 ({ key, value });
 
const Fair = ({key, fair: value}) =>
 ({ key, value });
const city = [];
const fair = [];
for(const datum of data) {
 city.push(City(datum));
 fair.push(Fair(datum));
}
 
//more compact display
for (const c of city)
 console.log(JSON.stringify(c));
console.log("-----");
for (const f of fair)
 console.log(JSON.stringify(f));

.as-console-wrapper {
 max-height: 100% !important;
}