Transform a value nested at any depth into an object key using Ramda or plain JavaScript

Question

Transform a value nested at any depth into an object key using Ramda or plain JavaScript

I have encountered a unique scenario while using a specific library. Instead of returning an array, this library returns nested objects with the final leaf node containing the value. For instance:

red.walk.fast.true is returned as {red: {walk: {fast: 'true'}}} or climbing.ascending is returned as {climbing: 'ascending'}

The current format of nested objects serves my purpose, but I require a method to convert the final value into another nested object with a null value. Therefore:

{red: {walk: {fast: 'true'}}} should become

{red: {walk: {fast: {true: null}}}}

This transformation should work for any deeply nested object. I am facing challenges implementing a recursive function using Ramda for this task. I tried the following approach:

const stringPropToObject = R.ifElse(
    R.is(String),
    R.assoc(R.__, null, {}),
    mapAllStringPropsToObjs);

const mapAllStringPropsToObjs = R.map(stringPropToObject)

const updatedObject = mapAllStringPropsToObjs({ a: { b: { c: 'd' } } })

console.log(updatedObject);

mapAllStringPropsToObjs attempts to iterate over an object's properties and pass them to stringPropToObject. The function then evaluates the property being passed in.

If the property is a string, it returns a new object with that string.
If the property is an object, it should recursively call mapAllStringPropsToObjs until a string value is encountered.

However, I am encountering an error "Cannot access 'mapAllStringPropsToObjs' before initialization." I understand why this error is occurring due to the current order of declarations, but I am unsure how to reorder them to resolve the issue as both functions are interdependent.

Is there any advice on using Ramda or vanilla JS to convert: {climbing: 'ascending'} to {climbing: {ascending: null}} and {red: {walk: {fast: 'true'}}} to

{red: {walk: {fast: {true: null}}}}

or any other nested value with arbitrary depth?

I appreciate any suggestions provided. Thank you.

javascript object nested mapping ramda.js

Answer 1

Answer №1

To overcome the issue with your co-dependent functions, a straightforward solution is to substitute the reference in the first function with a lambda expression that points to the second one:

const stringPropToObject = ifElse(
  is(String),
  assoc(__, null, {}),
  x => mapAllStringPropsToObjs(x)
);

const mapAllStringPropsToObjs = map(stringPropToObject)

const updatedObject = mapAllStringPropsToObjs({ a: { b: { c: 'd' } } })

console.log(updatedObject)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.0/ramda.js"></script>
<script> const {ifElse, is, assoc, __, map} = R </script>

Ramda is not optimized for recursive operations, but this is a common challenge in the language.

If it were up to me, I would have approached this problem differently using vanilla JavaScript, like in the following example:

const transform = (obj) => 
  Object.entries(obj) 
    .reduce((acc, [key, value]) => ({
      ...acc,
      [key]: typeof value === 'string' ? {[value]: null} : transform(value)
    }), {})

However, your modified recursive Ramda solution appears to be a more straightforward and elegant approach.

Answer 2

To overcome the issue with your co-dependent functions, a straightforward solution is to substitute the reference in the first function with a lambda expression that points to the second one:

const stringPropToObject = ifElse(
  is(String),
  assoc(__, null, {}),
  x => mapAllStringPropsToObjs(x)
);

const mapAllStringPropsToObjs = map(stringPropToObject)

const updatedObject = mapAllStringPropsToObjs({ a: { b: { c: 'd' } } })

console.log(updatedObject)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.0/ramda.js"></script>
<script> const {ifElse, is, assoc, __, map} = R </script>

Ramda is not optimized for recursive operations, but this is a common challenge in the language.

If it were up to me, I would have approached this problem differently using vanilla JavaScript, like in the following example:

const transform = (obj) => 
  Object.entries(obj) 
    .reduce((acc, [key, value]) => ({
      ...acc,
      [key]: typeof value === 'string' ? {[value]: null} : transform(value)
    }), {})

However, your modified recursive Ramda solution appears to be a more straightforward and elegant approach.

Answer 3

Answer №2

To handle the entries one by one, you can check if an object exists and create a new one if it doesn't.

function iterate(object) {
    Object.entries(object).forEach(([key, value]) => {
        if (value && typeof value === 'object') iterate(value);
        else object[key] = { [value]: null };
    });
}

var obj = { blue: { run: { slow: 'true' } } };

iterate(obj);
console.log(obj);

Answer 4

To handle the entries one by one, you can check if an object exists and create a new one if it doesn't.

function iterate(object) {
    Object.entries(object).forEach(([key, value]) => {
        if (value && typeof value === 'object') iterate(value);
        else object[key] = { [value]: null };
    });
}

var obj = { blue: { run: { slow: 'true' } } };

iterate(obj);
console.log(obj);

Answer 5

Answer №3

ScottSauyet mentioned the option of using a function, whether anonymous or arrow, to invoke mapAllStringPropsToObjs() at a future point when it has been defined.

A piece of code that delays a computation is known as a thunk. As per Wikipedia:

In the realm of computer programming, a thunk is a subroutine employed to insert an additional calculation into another subroutine. Thunks serve the purpose of postponing a calculation until its outcome is required, or to incorporate operations at the start or end of the aforementioned subroutine.

Moreover, it is suggested to substitute R.assoc with a flipped R.objOf in order to generate the object.

const objOfNull = flip(objOf)(null);

const mapAllStringPropsToObjs = map(ifElse(
  is(String),
  objOfNull,
  x => mapAllStringPropsToObjs(x)
));

const updatedObject = mapAllStringPropsToObjs({ a: { b: { c: 'd' } } })

console.log (updatedObject)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.0/ramda.js"></script>
<script> const {map, ifElse, is, flip, objOf} = R                               </script>

Answer 6

ScottSauyet mentioned the option of using a function, whether anonymous or arrow, to invoke mapAllStringPropsToObjs() at a future point when it has been defined.

A piece of code that delays a computation is known as a thunk. As per Wikipedia:

In the realm of computer programming, a thunk is a subroutine employed to insert an additional calculation into another subroutine. Thunks serve the purpose of postponing a calculation until its outcome is required, or to incorporate operations at the start or end of the aforementioned subroutine.

Moreover, it is suggested to substitute R.assoc with a flipped R.objOf in order to generate the object.

const objOfNull = flip(objOf)(null);

const mapAllStringPropsToObjs = map(ifElse(
  is(String),
  objOfNull,
  x => mapAllStringPropsToObjs(x)
));

const updatedObject = mapAllStringPropsToObjs({ a: { b: { c: 'd' } } })

console.log (updatedObject)

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.0/ramda.js"></script>
<script> const {map, ifElse, is, flip, objOf} = R                               </script>

Answer 7

Answer №4

This is a recursive approach that generates a new transformed object without modifying the original one.

function convertObj(obj, result = {}, current = result) {
  Object.entries(obj).forEach(([key, value]) => {
    current[key] = {}
    if (typeof value !== 'object') current[key][value] = null
    else convertObj(value, result, current[key])
  })
  return result
}

const sampleData1 = {climbing: {run: 'slow', hike: {mountain: 'fast'}}}
const sampleData2 = {red: {walk: {fast: 'true'}}}

console.log(sampleData1, convertObj(sampleData1))
console.log(sampleData2, convertObj(sampleData2))

Answer 8

This is a recursive approach that generates a new transformed object without modifying the original one.

function convertObj(obj, result = {}, current = result) {
  Object.entries(obj).forEach(([key, value]) => {
    current[key] = {}
    if (typeof value !== 'object') current[key][value] = null
    else convertObj(value, result, current[key])
  })
  return result
}

const sampleData1 = {climbing: {run: 'slow', hike: {mountain: 'fast'}}}
const sampleData2 = {red: {walk: {fast: 'true'}}}

console.log(sampleData1, convertObj(sampleData1))
console.log(sampleData2, convertObj(sampleData2))

Transform a value nested at any depth into an object key using Ramda or plain JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring ways to extract HREF using Selenium in combination with Node JS

How can I disable auto-fill for password input fields? Setting autocomplete="off" doesn't seem to be working

Step-by-step guide on integrating async and await functionality into Vuetify rules using an ajax call

considering multiple website addresses as one collective entity for the Facebook like button

Navigate back to the previous page following the completion of an AJAX data submission

Ways to protect my login details when making an ajax request?

Creating a navbar that sticks to the top of the page

Update D3 data, calculate the quantity of rows in an HTML table, and add animations to SVGs in the final

Switch the Ionic Slide Box to the "does-continue" setting

Automatically hide a label after a certain amount of time following a button click

The output returned by an AngularJS controller

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

Splitting Angular modules into separate projects with identical configurations

Tips for storing the state using Localstorage?

I'm encountering an issue with the submission button in the wizard, I suspect it could be a problem

What steps should I follow to run my JavaScript application locally on Linux Mint?

What steps can I take to fix the sum function?

In HTML, data can be easily accessed, however, JavaScript does not have the same

Integrate your React Native application with a Node.js backend on your local machine

Transforming ASP.NET MVC IEnumerable view model into a JSON array of elements