"Utilizing Ramda's map function to integrate dynamic keys: A step-by-step guide

Question

"Utilizing Ramda's map function to integrate dynamic keys: A step-by-step guide

I am currently working with an array structured like this :

array = ['2020-06-03', '2020-06-05', '2020-06-06']

My task is to transform it into the following format :

Object {
  "2020-06-03": Object {
    "selected": true,
    "selectedColor": "#ff5555",
  },
  "2020-06-04": Object {
    "selected": true,
    "selectedColor": "#ff5555",
  },
  "2020-06-05": Object {
    "selected": true,
    "selectedColor": "#ff5555",
  },
}

This is my current approach :

const historyDates = map(date => {
      return { selected: true, selectedColor: "#ff5555"};
    }, array);

The issue I am facing is that I need to include keys in the new object created. How can I achieve this using Ramda expressions? Additionally, I am aware that I am returning a mapped array instead of an object filled with sub-objects.

Any assistance or guidance would be greatly appreciated.

javascript key mapping ramda.js

Answer 1

Answer №1

When using the R.map function, which behaves similarly to the native Array.map(), it returns an array. By creating an array of objects with the original values as keys and then merging them into a single object, you can achieve the following:

const { pipe, map, mergeAll } = R

const fn = pipe(
  map(k => ({ [k]: { selected: true, selectedColor: "#ff5555"} })),
  mergeAll
)

const array = ['2020-06-03', '2020-06-05', '2020-06-06']

const result = fn(array)

console.log(result)

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

Another approach is to generate an array of [key, value] pairs and then convert it into an object using R.fromPairs:

const { pipe, map, fromPairs } = R

const fn = pipe(
  map(k => [k, { selected: true, selectedColor: "#ff5555"}]),
  fromPairs
)

const array = ['2020-06-03', '2020-06-05', '2020-06-06']

const result = fn(array)

console.log(result)

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

If you prefer vanilla JavaScript, you can achieve the same result using Array.map() and Object.fromEntries():

const fn = arr => Object.fromEntries(
  arr.map(k => [k, { selected: true, selectedColor: "#ff5555"}])
)

const array = ['2020-06-03', '2020-06-05', '2020-06-06']

const result = fn(array)

console.log(result)

Answer 2

When using the R.map function, which behaves similarly to the native Array.map(), it returns an array. By creating an array of objects with the original values as keys and then merging them into a single object, you can achieve the following:

const { pipe, map, mergeAll } = R

const fn = pipe(
  map(k => ({ [k]: { selected: true, selectedColor: "#ff5555"} })),
  mergeAll
)

const array = ['2020-06-03', '2020-06-05', '2020-06-06']

const result = fn(array)

console.log(result)

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

Another approach is to generate an array of [key, value] pairs and then convert it into an object using R.fromPairs:

const { pipe, map, fromPairs } = R

const fn = pipe(
  map(k => [k, { selected: true, selectedColor: "#ff5555"}]),
  fromPairs
)

const array = ['2020-06-03', '2020-06-05', '2020-06-06']

const result = fn(array)

console.log(result)

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

If you prefer vanilla JavaScript, you can achieve the same result using Array.map() and Object.fromEntries():

const fn = arr => Object.fromEntries(
  arr.map(k => [k, { selected: true, selectedColor: "#ff5555"}])
)

const array = ['2020-06-03', '2020-06-05', '2020-06-06']

const result = fn(array)

console.log(result)

"Utilizing Ramda's map function to integrate dynamic keys: A step-by-step guide

Answer №1

Similar questions

Can a condition be incorporated in a gulpfile to execute a task depending on the size of a file?

Tips on attaching a suffix icon to a material-ui-pickers input box

Navigating additional information in D3 Node Link Force diagram

Executing a scroll down action with Selenium in combination with Node.js and the Chai/Mocha testing framework

Stop hyperlinks from automatically opening in a new tab or window

What methods do you suggest for storing the app's state in the browser to reduce the number of requests to the backend?

Conflicting TypeScript enum types: numbers and numbers in NestJS/ExpressJS

Why is the current Menu Item highlight feature not functioning properly?

Utilize AngularJS to create a concealed input field

Retrieve the most recent information based on the ID from an object by utilizing timestamps within Angular 6

Creating a live child component using React

Managing errors and error codes in React/Redux applications

Successful jQuery Ajax request made without the need for JSON parsing

implementing a timestamp in a specific timezone with Vue.js

Tips on emphasizing all div elements and incorporating navigation to each of them

I need help with creating an AJAX JSON call using Angular. Let me share the JavaScript function that I currently have

Dynamic modal in Vue JS with custom components

Conceal any ng-repeat elements that do not contain corresponding grandchildren within two levels of nested ng-repeats

Utilizing JSON data from Jade in local JavaScript: A comprehensive guide

script to pause video using jQuery