Utilize Ramda to selectively filter each inner property within arrays

Question

Utilize Ramda to selectively filter each inner property within arrays

I have a data structure that looks like this:

const arrays = {
  one: [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4, 1, 3]],
  two: [[1, 77, 2], [2, 6, 3], [3, 0, 0], [4, 55, 3]],
  three: [[1, 4, 6], [2, 0, 0], [3, 5, 6], [4, 0, 0]],
};

In this structure, the first number in each array is consistent:
1 for the first inner array, 2 for the second inner array, 3 for the third inner array, and so on.

I am looking to filter these arrays based on the first number and a comparison number (e.g. [3]).
For example, if we use the filter number [3] (less than or equal to 3), the desired result would be:

const arrays = {
  one:   [[1,33,41], [2,0,27], [3,7,9]],
  two:   [[1,77,2],  [2,6,3],  [3,0,0]],
  three: [[1,4,6],   [2,0,0],  [3,5,6]],
};

This output includes only the inner arrays where the first numbers are less than or equal to 3, while ignoring those starting with higher numbers like 4, 5, and so on. What would be the Ramda approach to achieve this functionality?

javascript arrays functional-programming ramda.js

Answer 1

Answer №1

I appreciate how Ramda's map function allows for seamless iteration over object properties without the need for Object.fromEntries or Object.entries. This function embodies the power of filter, which takes inner arrays as arguments. The filter function is a clever composition of gte and head, comparing the first element of each array to 3:

const arrays =
  { one:   [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4,  1, 3]]
  , two:   [[1, 77,  2], [2, 6,  3], [3, 0, 0], [4, 55, 3]]
  , three: [[1,  4,  6], [2, 0,  0], [3, 5, 6], [4,  0, 0]] };

   map(filter(compose(gte(3), head)), arrays);
// ^   ^      ^       ^       ^
// A   B      C       D       E

//=> { one:   [[ 1, 33, 41], [2, 0, 27], [3, 7, 9]]
//=> , two:   [[ 1, 77,  2], [2, 6,  3], [3, 0, 0]]
//=> , three: [[ 1,  4,  6], [2, 0,  0], [3, 5, 6]] }

Mapping over each property (A) sends each array to filter (B)
Each inner array then undergoes compose (C)
The head of each inner array is compared with 3 (D)

A helpful note from Scott Christopher in the comments about gte being tricky when partially applied. Simplifying the entire composition, we can replace it with this concise lambda: ([x]) => x <= 3.

Another solution that I find appealing:

map(filter(([x]) => x <= 3), arrays);

Answer 2

I appreciate how Ramda's map function allows for seamless iteration over object properties without the need for Object.fromEntries or Object.entries. This function embodies the power of filter, which takes inner arrays as arguments. The filter function is a clever composition of gte and head, comparing the first element of each array to 3:

const arrays =
  { one:   [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4,  1, 3]]
  , two:   [[1, 77,  2], [2, 6,  3], [3, 0, 0], [4, 55, 3]]
  , three: [[1,  4,  6], [2, 0,  0], [3, 5, 6], [4,  0, 0]] };

   map(filter(compose(gte(3), head)), arrays);
// ^   ^      ^       ^       ^
// A   B      C       D       E

//=> { one:   [[ 1, 33, 41], [2, 0, 27], [3, 7, 9]]
//=> , two:   [[ 1, 77,  2], [2, 6,  3], [3, 0, 0]]
//=> , three: [[ 1,  4,  6], [2, 0,  0], [3, 5, 6]] }

Mapping over each property (A) sends each array to filter (B)
Each inner array then undergoes compose (C)
The head of each inner array is compared with 3 (D)

A helpful note from Scott Christopher in the comments about gte being tricky when partially applied. Simplifying the entire composition, we can replace it with this concise lambda: ([x]) => x <= 3.

Another solution that I find appealing:

map(filter(([x]) => x <= 3), arrays);

Answer 3

Answer №2

I am in full agreement with @customcommander's method, and I would like to mention that numerical indexes can also be passed to R.propSatisfies.

const headIs3OrBelow = R.propSatisfies(R.gte(3), 0);
const fn = R.map(R.filter(headIs3OrBelow));

// ===
const data = {
  one: [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4, 1, 3]],
  two: [[1, 77, 2], [2, 6, 3], [3, 0, 0], [4, 55, 3]],
  three: [[1, 4, 6], [2, 0, 0], [3, 5, 6], [4, 0, 0]],
};

console.log(
  fn(data),
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js" integrity="sha512-3sdB9mAxNh2MIo6YkY05uY1qjkywAlDfCf5u1cSotv6k9CZUSyHVf4BJSpTYgla+YHLaHG8LUpqV7MHctlYzlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

I also concur that gte and similar methods are challenging to read, as they seem to read backwards like is 3 gte than x... In Haskell, you could express this as:


3 `gte` x

A more straightforward approach:

const headIs3OrBelow = ([head]) => head <= 3;

const fn = (data) => Object.entries(data).reduce(
  (res, [k, lists]) => ({ ...res, [k]: lists.filter(headIs3OrBelow) }),
  {},
);

// ===
const data = {
  one: [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4, 1, 3]],
  two: [[1, 77, 2], [2, 6, 3], [3, 0, 0], [4, 55, 3]],
  three: [[1, 4, 6], [2, 0, 0], [3, 5, 6], [4, 0, 0]],
};

console.log(
  fn(data),
);

Answer 4

I am in full agreement with @customcommander's method, and I would like to mention that numerical indexes can also be passed to R.propSatisfies.

const headIs3OrBelow = R.propSatisfies(R.gte(3), 0);
const fn = R.map(R.filter(headIs3OrBelow));

// ===
const data = {
  one: [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4, 1, 3]],
  two: [[1, 77, 2], [2, 6, 3], [3, 0, 0], [4, 55, 3]],
  three: [[1, 4, 6], [2, 0, 0], [3, 5, 6], [4, 0, 0]],
};

console.log(
  fn(data),
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js" integrity="sha512-3sdB9mAxNh2MIo6YkY05uY1qjkywAlDfCf5u1cSotv6k9CZUSyHVf4BJSpTYgla+YHLaHG8LUpqV7MHctlYzlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

I also concur that gte and similar methods are challenging to read, as they seem to read backwards like is 3 gte than x... In Haskell, you could express this as:


3 `gte` x

A more straightforward approach:

const headIs3OrBelow = ([head]) => head <= 3;

const fn = (data) => Object.entries(data).reduce(
  (res, [k, lists]) => ({ ...res, [k]: lists.filter(headIs3OrBelow) }),
  {},
);

// ===
const data = {
  one: [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4, 1, 3]],
  two: [[1, 77, 2], [2, 6, 3], [3, 0, 0], [4, 55, 3]],
  three: [[1, 4, 6], [2, 0, 0], [3, 5, 6], [4, 0, 0]],
};

console.log(
  fn(data),
);

Answer 5

Answer №3

While I see your interest in utilizing Ramda, here is an alternative approach that achieves the same outcome without relying on the library. In this solution, we create an object called from entries where the entries are filtered based on comparing the first array value a[0] with the specified maxVal.

const arrays = {
  one: [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4, 1, 3]],
  two: [[1, 77, 2], [2, 6, 3], [3, 0, 0], [4, 55, 3]],
  three: [[1, 4, 6], [2, 0, 0], [3, 5, 6], [4, 0, 0]],
};

const filterArrays = (arsObj, maxVal) => {
  return Object.fromEntries(Object.entries(arsObj).map(([k, v]) => {
    return [k, v.filter((a) => a[0] <= maxVal)];
  }));
}

const result = filterArrays(arrays, 3);
console.log(result);

Answer 6

While I see your interest in utilizing Ramda, here is an alternative approach that achieves the same outcome without relying on the library. In this solution, we create an object called from entries where the entries are filtered based on comparing the first array value a[0] with the specified maxVal.

const arrays = {
  one: [[1, 33, 41], [2, 0, 27], [3, 7, 9], [4, 1, 3]],
  two: [[1, 77, 2], [2, 6, 3], [3, 0, 0], [4, 55, 3]],
  three: [[1, 4, 6], [2, 0, 0], [3, 5, 6], [4, 0, 0]],
};

const filterArrays = (arsObj, maxVal) => {
  return Object.fromEntries(Object.entries(arsObj).map(([k, v]) => {
    return [k, v.filter((a) => a[0] <= maxVal)];
  }));
}

const result = filterArrays(arrays, 3);
console.log(result);

Utilize Ramda to selectively filter each inner property within arrays

Answer №1

Answer №2

Answer №3

Similar questions

Issue encountered while retrieving information using Axios in a Vue.js application

What is the process for consolidating a TypeScript web application with node modules into a single JavaScript file using the command line

The inclusion of Bootstrap 4 in the header seems to be causing issues with mouse events not functioning correctly

Tips for emphasizing the letters of the alphabet used in search functionality with Angular

Looking through a Json file and retrieving data with the help of Javascript

Guide on sending a post request to a PHP component

Transforming a tag string into an array

Ensure that clicking on an element closes any currently visible elements before opening a new element

Is it feasible to swap out the cursor for a personalized image of my choice?

Error encountered with Firebase Modular SDK V9.0.0+: Issue with undefined firebase property 'apps' causing TypeError

Steer clear of initializing arrays in Java

Is there a quicker way to locate information by using keyword search?

Tips for composing a single aggregation within a query

Simple steps to change JSON Object to JavaScript array

When making an Axios API request in Next.js, an error is encountered stating that the property 'map' cannot be read as it is undefined

Angular 6: Issue with displaying data on the user interface

Enhancing the appearance of a variety of React elements

Exploring ways to retrieve information stored in localStorage within an android mobile application

Issue with Bootstrap v3.3.6 Dropdown Functionality

Retrieve the error block within an AJAX request, even if the response status is 200 OK