A step-by-step guide on transforming an array of objects into an array of arrays with the help of Ramda

Question

A step-by-step guide on transforming an array of objects into an array of arrays with the help of Ramda

I want to convert the following data:

[
  { a: 2000, b: 4000 },
  { a: 8000, b: 5000 },
  { a: 6000, b: 1000 }
];

Into this format:

[
  [ 2000, 8000, 6000 ],
  [ 4000, 5000, 1000 ]
];

Using Ramda library.

I am able to achieve this using R.reduce function, but I am exploring if there is a more efficient way using built-in functions provided by Ramda.

One important point; the solution should not assume fixed keys in the objects. The keys will remain consistent across objects but may vary each time the function runs. For instance, consider the following input:

Input:

[
  { c: 1000, d: 4000, e: 7000 },
  { c: 2000, d: 5000, e: 8000 },
  { c: 3000, d: 6000, e: 9000 }
];

Result:

[
  [ 1000, 2000, 3000 ],
  [ 4000, 5000, 6000 ],
  [ 7000, 8000, 9000 ],
];

javascript arrays javascript-objects ramda.js

Answer 1

Answer №1

Utilize vanilla JavaScript to transpose the values of the mapped object.

transpose(input.map(Object.values));

const transpose = (a) => a[0].map((_, i) => a.map(r => r[i]));

{
  const
    input = [
      { a: 2000, b: 4000 },
      { a: 8000, b: 5000 },
      { a: 6000, b: 1000 }
    ],
    expected = [
      [ 2000, 8000, 6000 ],
      [ 4000, 5000, 1000 ]
    ],
    actual = transpose(input.map(Object.values));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

{
  const
    input = [
      { c: 1000, d: 4000 },
      { c: 2000, d: 5000 },
      { c: 3000, d: 6000 }
    ],
    expected = [
      [ 1000, 2000, 3000 ],
      [ 4000, 5000, 6000 ]
    ],
    actual = transpose(input.map(Object.values));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

The Rambda equivalent code:

R.transpose(R.map(R.values, input));             // or
R.transpose(R.compose(R.map(R.values))(input));

{
  const
    input = [
      { a: 2000, b: 4000 },
      { a: 8000, b: 5000 },
      { a: 6000, b: 1000 }
    ],
    expected = [
      [ 2000, 8000, 6000 ],
      [ 4000, 5000, 1000 ]
    ],
    actual = R.transpose(R.map(R.values, input));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

{
  const
    input = [
      { c: 1000, d: 4000 },
      { c: 2000, d: 5000 },
      { c: 3000, d: 6000 }
    ],
    expected = [
      [ 1000, 2000, 3000 ],
      [ 4000, 5000, 6000 ]
    ],
    actual = R.transpose(R.map(R.values, input));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.min.js"></script>

Answer 2

Utilize vanilla JavaScript to transpose the values of the mapped object.

transpose(input.map(Object.values));

const transpose = (a) => a[0].map((_, i) => a.map(r => r[i]));

{
  const
    input = [
      { a: 2000, b: 4000 },
      { a: 8000, b: 5000 },
      { a: 6000, b: 1000 }
    ],
    expected = [
      [ 2000, 8000, 6000 ],
      [ 4000, 5000, 1000 ]
    ],
    actual = transpose(input.map(Object.values));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

{
  const
    input = [
      { c: 1000, d: 4000 },
      { c: 2000, d: 5000 },
      { c: 3000, d: 6000 }
    ],
    expected = [
      [ 1000, 2000, 3000 ],
      [ 4000, 5000, 6000 ]
    ],
    actual = transpose(input.map(Object.values));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

The Rambda equivalent code:

R.transpose(R.map(R.values, input));             // or
R.transpose(R.compose(R.map(R.values))(input));

{
  const
    input = [
      { a: 2000, b: 4000 },
      { a: 8000, b: 5000 },
      { a: 6000, b: 1000 }
    ],
    expected = [
      [ 2000, 8000, 6000 ],
      [ 4000, 5000, 1000 ]
    ],
    actual = R.transpose(R.map(R.values, input));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

{
  const
    input = [
      { c: 1000, d: 4000 },
      { c: 2000, d: 5000 },
      { c: 3000, d: 6000 }
    ],
    expected = [
      [ 1000, 2000, 3000 ],
      [ 4000, 5000, 6000 ]
    ],
    actual = R.transpose(R.map(R.values, input));

  console.log(JSON.stringify(actual) === JSON.stringify(expected));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.min.js"></script>

Answer 3

Answer №2

If the order of properties in your input objects remains constant, this solution is rather elegant:

const group = compose(transpose, map(values))

console.log(group([{a: 2000, b: 4000}, {a: 8000, b: 5000},{a: 6000, b: 1000}]))

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.js"></script>
<script>const {compose, transpose, map, values} = R                  </script>

However, if the property order cannot be guaranteed, a bit more effort will be required. Although this point-free version functions properly:

const group = compose(transpose, chain(compose(map, props), compose(keys, head)))

console.log(group([{a: 2000, b: 4000}, {a: 8000, b: 5000},{a: 6000, b: 1000}]))

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.js"></script>
<script>const {transpose, chain, compose, map, props, keys, head} = R</script>

I personally find it less clear compared to the named function approach:

const group = (input) => 
  transpose(map(props(keys(head(input))))(input))

console.log(group([{a: 2000, b: 4000}, {a: 8000, b: 5000},{a: 6000, b: 1000}]))

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.js"></script>
<script>const {transpose, chain, map, props, keys, head} = R         </script>

Additionally, as mentioned by Mr. Polywhirl, creating a basic custom transpose function allows for achieving a similar outcome easily with vanilla JS.

Answer 4

If the order of properties in your input objects remains constant, this solution is rather elegant:

const group = compose(transpose, map(values))

console.log(group([{a: 2000, b: 4000}, {a: 8000, b: 5000},{a: 6000, b: 1000}]))

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.js"></script>
<script>const {compose, transpose, map, values} = R                  </script>

However, if the property order cannot be guaranteed, a bit more effort will be required. Although this point-free version functions properly:

const group = compose(transpose, chain(compose(map, props), compose(keys, head)))

console.log(group([{a: 2000, b: 4000}, {a: 8000, b: 5000},{a: 6000, b: 1000}]))

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.js"></script>
<script>const {transpose, chain, compose, map, props, keys, head} = R</script>

I personally find it less clear compared to the named function approach:

const group = (input) => 
  transpose(map(props(keys(head(input))))(input))

console.log(group([{a: 2000, b: 4000}, {a: 8000, b: 5000},{a: 6000, b: 1000}]))

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

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.29.0/ramda.js"></script>
<script>const {transpose, chain, map, props, keys, head} = R         </script>

Additionally, as mentioned by Mr. Polywhirl, creating a basic custom transpose function allows for achieving a similar outcome easily with vanilla JS.

A step-by-step guide on transforming an array of objects into an array of arrays with the help of Ramda

Answer №1

Answer №2

Similar questions

Converting Venn diagram code from JavaScript <script> tags to Angular 2: A step-by-step guide

When the page is resized for mobile, the Bootstrap modal shifts downwards

Showing the number of guilds as an action displayed on the screen

Names changes and deletion of files that have been uploaded- Using Vue.js

Invoke a Python function from C, sending float arrays as parameters and saving the resulting data into them

Is it possible to hide a menu by removing a class when the user clicks outside the menu?

Guide to embed a Google Sheets chart into a WordPress website

Utilizing JSON format for processing HTTP requests in JavaScript with Node.js

Create a unique Bitcoin address using a derivation scheme

JavaScript: the battle between anonymous and direct function invocation

A method for combining multiple arrays into a single array within a For loop

Navigating through a JSON dictionary in Svelte: A step-by-step guide

Executing functions in a loop using Angular

Error: Validation error encountered while validating recipe: _listId field is mandatory and must be provided

Having difficulty extracting data from certain tables with Beautiful Soup

Tips for resolving the issue of cypress automatically opening a new tab

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

The removeClass method does not affect the class attribute when using $(this).attr('class'), but only when using $(this).attr('id')

Utilizing React, generate buttons on the fly that trigger the display of their respective

How can nextJS leverage async getInitialProps() method in combination with AWS S3?