3

I have an array of objects

  "options": [
    {
      "width": 10,
      "height": 20
    },
    {
      "width": 20,
      "height": 40
    },
    {
      "width": 30,
      "height": 60
    }
  ]

That I want convert to the following

{ width: [10, 20, 30], height: [20, 40, 60] }

Now keep in mind that the keys are dynamic. In this instance it's width and height.

I do actually have solution.

const pluck = (arr: Record<string, any> | undefined, property: string) => {
  return arr?.map((obj: any) => {
    return obj[property];
  });
};
const unique = (arr: any[] | undefined) =>
  arr ? Object.keys(Object.assign({}, ...arr)) : null;

const keys = unique(myArray);
const options = keys
  ? Object.fromEntries(keys.map((key) => [key, pluck(myArray, key)]))
  : null;

But can I make this shorter?

Improve this question
3
  • 1
    Such a handsome code. why do you want to be shorter? Commented Aug 8, 2021 at 10:13
  • @Danial Thanks! I just have a feeling that it can be done better, maybe using reduce. Commented Aug 8, 2021 at 10:22
  • do not find the shorter because your app user doesn't care about it, find the most responsive code. Commented Aug 8, 2021 at 10:44

4 Answers 4

Reset to default
3

The simplest way is just to write a loop. Let's start with just JavaScript and then we'll come back to types:

const result = {};
for (const entry of myArray) {
    for (const key in entry) { // or: of Object.keys(entry)
        const values = result[key] = result[key] ?? [];
        values.push(entry[key]);
    }
}

Live Example:

const myArray = [
    {
        "width": 10,
        "height": 20
    },
    {
        "width": 20,
        "height": 40
    },
    {
        "width": 30,
        "height": 60
    }
];

const result = {};
for (const entry of myArray) {
    for (const key in entry) { // or: of Object.keys(entry)
        const values = result[key] = result[key] ?? [];
        values.push(entry[key]);
    }
}
console.log(result);
.as-console-wrapper {
    max-height: 100% !important;
}

Re for (const key in entry) vs. for (const key of Object.keys(entry), the former also visits inherited properties. Your example doesn't have any inherited properties, but if you had them, you could either add a hasOwnProperty check, or if you don't mind the temporary array, use of Object.keys(entry).

Okay, so: Types. I was expecting this to be quite difficult, but it turned out not to be, which makes me suspicious I'm missing something. :-) We'd use a function for it so we can use type parameters:

function condense<ObjType extends object>(array: ObjType[]) {
    const result: Record<string, any> = {};
    for (const entry of array) {
        for (const key in entry) { // or: of Object.keys(entry)
            const values = result[key] = result[key] ?? [];
            values.push(entry[key]);
        }
    }
    return result as {[key in keyof ObjType]: ObjType[key][]};
}
const result = condense(myArray);
console.log(result);

Playground link

Since the result is built up over time, I used fairly loose types within the condense function, but the input and output are properly typed. For instance, the result of result above is { width: number[]; height: number[]; }, which is what we want. It even works if we throw in a third property (say, description) of a different type (say, string), giving us { width: number[]; height: number[]; description: string[]; }: Playground link

The fad at present is to use reduce, but there's no reason to use it here, all it does is add complexity.

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

6 Comments

He said "keep in mind that the keys are dynamic."
@T.J.Crowder Hey T.J, is it possible to add TypeScript support?
@Unknown - Sorry, I cannot understand how I missed multiple fundamental things about your question (that the keys were dynamic, that you're using TypeScript). Both are blindingly clear and yet... I'll see if I can, but the types aspect of this is very complicated indeed. I may just need to delete the answer. But let me give it a try. :-)
@Unknown - Your current result is of type {[k: string]: any} | null. That's relatively easy to replicate, but I feel like I'd be cheating. :-) To actually have a typed result would require that the input array be as const, I think.
@Unknown - Thanks! You're very kind given how badly I read the quesetion. :-) It turned out to be easier than I thought, and didn't require as const. I've updated the answer.
|
0

i do with for loop, because its more responsive and faster than map or reduce.

  const options = [
    { "width": 10, "height": 20 },
    { "width": 20, "height": 40 },
    { "width": 30, "height": 60 }
  ];
//That I want convert to the following
//{ width: [10, 20, 30], height: [20, 40, 60] }

let newobj = new Object();
for( let a of options ){
  for( let b of Object.keys(a) ){
    if( !newobj[b] ) newobj[b]=[]; newobj[b].push(a[b]);
  }
}
console.log(newobj)

Improve this answer

1 Comment

i do with for loop, because its more responsive and faster than map or reduce. Speed/performance is not an issue at all. And therefore I recommend to get familiar with all array methods and with object iteration based on Object[keys|values|entries]. Such methods consume functions. Thus for more complex data-structures one can write reusable code for repetitive tasks like data-conversion and tree-walking. If such functions are also named in a precise and human readable way one does help other developers to more easily comprehend and maintain the code one once came up with.
-1

See Array.prototype.reduce() for additional info.

const input = [
  { width: 100, height: 100 },
  { width: 200, height: 200 },
  { width: 300, height: 300 },
];

const group = (someArrayOfObjects) => {
  return someArrayOfObjects.reduce((acc, current) => {
    Object.entries(current).forEach(([key, value]) => {
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(value);
    });
    return acc;
  }, {});
};

console.log(group(input))

Improve this answer

5 Comments

There's no reason for reduce here. Just a loop.
Hmm, interesting. Out of curiosity, is there any particular reason why you'd recommend using a for loop? @T.J.Crowder
reduce is great when you're doing functional programming with predefined, reusable reducers. It's meh if you're at least changing the accumulator (for instance, summing an array). Beyond that, it's just a more complicated, harder to write, harder to read way to write a loop. (It's not just me, btw. :-) but also folks like Jake Archibald and Brian Terlson, ...)
Haha, fair. Perhaps it is a fad. I've personally found for more complex and the separate let a little gross. That being said, the example you've given for this question is honestly 👌. Thanks for the lesson in the power of for
Arman, people like you who listen (even when ending up not agreeing) rather than blindly reacting make SO a better place. Thanks! And happy coding!
-1 

var height = [], width = [];
options.forEach((op) =>{
  height.push(op.height)
  width.push(op.width)
})
   var returnValue = {width: width, height: height}

Improve this answer

1 Comment

"Now keep in mind that the keys are dynamic."

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.