Create a layered structure using a specified path

Question

Create a layered structure using a specified path

I am aiming to create a function that can accept an object path, like

{ 'person.data.info.more.favorite': 'smth' }

and then output a nested object:

{
  person: {
    data: {
      info: {
        more: {
          favorite: 'smth',
        },
      },
    },
  },
}

What is the easiest way to accomplish this?

javascript object recursion path nested

Answer 1

Answer №1

When dealing with a single key/value pair, you can use a simple method called `nest` which involves using the functions `split` and `reduceRight` -

const nest = ([path, value]) =>
  path.split('.').reduceRight((v, p) => ({ [p]: v }), value)

console.log(nest(['a', 'smth']))
console.log(nest(['a.b', 'smth']))
console.log(nest(['person.data.info.more.favorite', 'smth']))

{
  "a": "smth"
}
{
  "a": {
    "b": "smth"
  }
}
{
  "person": {
    "data": {
      "info": {
        "more": {
          "favorite": "smth"
        }
      }
    }
  }
}

If you have to apply this method to an entire object where key paths could overlap, you'll need to use a function called `expand` which utilizes `nest` -

const input = {
  "server.host": "localhost",
  "server.port": 9999,
  "database.host": "localhost",
  "database.name": "mydb",
  "database.port": 7777,
  "database.user": "root",
  "debug.log": true
}

console.log(expand(input))

{
  "server": {
    "host": "localhost",
    "port": 9999
  },
  "database": {
    "host": "localhost",
    "name": "mydb",
    "port": 7777,
    "user": "root"
  },
  "debug": {
    "log": true
  }
}

To implement this on a complete object, you can use the `expand(o)` function which takes entries from the input object `o`, maps over each with `nest`, and finally reduces the result with `merge` -

const expand = o =>
  Object.entries(o).map(nest).reduce(merge, {})

const nest = ([path, value]) =>
  path.split(".").reduceRight((v, p) => ({ [p]: v }), value)

// merge function definition here... (omitted for brevity)

const input = {
  "server.host": "localhost",
  "server.port": 9999,
  "database.host": "localhost",
  "database.name": "mydb",
  "database.port": 7777,
  "database.user": "root",
  "debug.log": true
}

console.log(expand(input))

Answer 2

When dealing with a single key/value pair, you can use a simple method called `nest` which involves using the functions `split` and `reduceRight` -

const nest = ([path, value]) =>
  path.split('.').reduceRight((v, p) => ({ [p]: v }), value)

console.log(nest(['a', 'smth']))
console.log(nest(['a.b', 'smth']))
console.log(nest(['person.data.info.more.favorite', 'smth']))

{
  "a": "smth"
}
{
  "a": {
    "b": "smth"
  }
}
{
  "person": {
    "data": {
      "info": {
        "more": {
          "favorite": "smth"
        }
      }
    }
  }
}

If you have to apply this method to an entire object where key paths could overlap, you'll need to use a function called `expand` which utilizes `nest` -

const input = {
  "server.host": "localhost",
  "server.port": 9999,
  "database.host": "localhost",
  "database.name": "mydb",
  "database.port": 7777,
  "database.user": "root",
  "debug.log": true
}

console.log(expand(input))

{
  "server": {
    "host": "localhost",
    "port": 9999
  },
  "database": {
    "host": "localhost",
    "name": "mydb",
    "port": 7777,
    "user": "root"
  },
  "debug": {
    "log": true
  }
}

To implement this on a complete object, you can use the `expand(o)` function which takes entries from the input object `o`, maps over each with `nest`, and finally reduces the result with `merge` -

const expand = o =>
  Object.entries(o).map(nest).reduce(merge, {})

const nest = ([path, value]) =>
  path.split(".").reduceRight((v, p) => ({ [p]: v }), value)

// merge function definition here... (omitted for brevity)

const input = {
  "server.host": "localhost",
  "server.port": 9999,
  "database.host": "localhost",
  "database.name": "mydb",
  "database.port": 7777,
  "database.user": "root",
  "debug.log": true
}

console.log(expand(input))

Answer 3

Answer №2

CORRECTION: Below is the accurate solution, sorry for misreading it initially.

let myObj = { 'person.data.info.more.favorite': 'smth' }

function getNestedObj( object ) {

  let keys = Object.keys( object )[0];
  let value = Object.values( object )[0];
  let keyArray = keys.split(".");

  let nextObject;
  let returnObj = {};
  

  keyArray.forEach( ( key ) => {
 
    let newObj = {};

    if( !nextObject ) {
      returnObj[key] = newObj
      nextObject = newObj;
    } else {
      nextObject[key] = newObj
      nextObject = newObj;
    }
    console.log(key)
  });

  nextObject[0] = value

  console.log( returnObj );

  return returnObj;
}

getNestedObj( myObj);

PREVIOUS INCORRECT ANSWER:

Here's a code snippet to achieve the desired result. Note that it only works with string values in this particular implementation

"use strict";
let myObject = {
    person: {
        data: {
            info: {
                more: {
                    favorite: 'smth',
                },
                less: {
                    favourite: 'smthing else'
                },
                random: "a string"
            },
        },
    },
};
function concatKeys(object, key) {
    let keys = Object.keys(object);
    let keyDictionary = {};
    if (key && typeof object === 'string') {
        return { [key]: object };
    }
    if (keys.length > 0) {
        keys.forEach((nextKey) => {
            let newKey = key ? `${key}.${nextKey}` : nextKey;
            let nextObj = object[nextKey];
            let newDictionary = concatKeys(nextObj, newKey);
            keyDictionary = Object.assign(Object.assign({}, keyDictionary), newDictionary);
        });
    }
    return keyDictionary;
}
let output = concatKeys(myObject);
console.log(output);

You can check the code in action here on Typescript playground

If you run the aforementioned code, it will display the following in the console.

[LOG]: {
  "person.data.info.more.favorite": "smth",
  "person.data.info.less.favourite": "smthing else",
  "person.data.info.random": "a string"
}

Edit: Apologies for the confusion earlier, I've updated the answer to be in JavaScript now while the playground remains in Typescript but the provided code above is in JS.

Answer 4

CORRECTION: Below is the accurate solution, sorry for misreading it initially.

let myObj = { 'person.data.info.more.favorite': 'smth' }

function getNestedObj( object ) {

  let keys = Object.keys( object )[0];
  let value = Object.values( object )[0];
  let keyArray = keys.split(".");

  let nextObject;
  let returnObj = {};
  

  keyArray.forEach( ( key ) => {
 
    let newObj = {};

    if( !nextObject ) {
      returnObj[key] = newObj
      nextObject = newObj;
    } else {
      nextObject[key] = newObj
      nextObject = newObj;
    }
    console.log(key)
  });

  nextObject[0] = value

  console.log( returnObj );

  return returnObj;
}

getNestedObj( myObj);

PREVIOUS INCORRECT ANSWER:

Here's a code snippet to achieve the desired result. Note that it only works with string values in this particular implementation

"use strict";
let myObject = {
    person: {
        data: {
            info: {
                more: {
                    favorite: 'smth',
                },
                less: {
                    favourite: 'smthing else'
                },
                random: "a string"
            },
        },
    },
};
function concatKeys(object, key) {
    let keys = Object.keys(object);
    let keyDictionary = {};
    if (key && typeof object === 'string') {
        return { [key]: object };
    }
    if (keys.length > 0) {
        keys.forEach((nextKey) => {
            let newKey = key ? `${key}.${nextKey}` : nextKey;
            let nextObj = object[nextKey];
            let newDictionary = concatKeys(nextObj, newKey);
            keyDictionary = Object.assign(Object.assign({}, keyDictionary), newDictionary);
        });
    }
    return keyDictionary;
}
let output = concatKeys(myObject);
console.log(output);

You can check the code in action here on Typescript playground

If you run the aforementioned code, it will display the following in the console.

[LOG]: {
  "person.data.info.more.favorite": "smth",
  "person.data.info.less.favourite": "smthing else",
  "person.data.info.random": "a string"
}

Edit: Apologies for the confusion earlier, I've updated the answer to be in JavaScript now while the playground remains in Typescript but the provided code above is in JS.

Answer 5

Answer №3

The approach presented here shares similarities with Mulan's answer, but takes a different approach to dividing responsibilities. It introduces an intermediate format referred to as pathEntries, which resembles the output of Object.entries but includes complete paths instead of just top-level properties. In this example, it appears as follows:

[['person', 'data', 'info', 'more', 'favorite'], 'smth']

The expand function utilizes Object.entries on the input, splits keys based on dots, and then applies hydrate to the resultant data. The hydrate function, a fundamental aspect of my toolset, acts as a thin covering for setPath, consolidating path entries into a single object. Its structure is demonstrated below:

const setPath = ([p, ...ps]) => (v) => (o) =>
  p == undefined ? v : Object.assign(
    Array.isArray(o) || Number.isInteger(p) ? [] : {},
    {...o, [p]: setPath(ps)(v)((o || {})[p])}
  )

const hydrate = (xs) =>
  xs.reduce((a, [p, v]) => setPath(p)(v)(a), {})

const expand  = (o) =>
  hydrate(Object.entries(o).map(([k, v]) => [k.split('.'), v]))

console.log(expand({'person.data.info.more.favorite': 'smth'}))

const input = {"server.host": "localhost", "server.port": 9999, "database.host": "localhost", "database.name": "mydb", "database.port": 7777, "database.user": "root", "debug.log": true}

console.log(expand(input))

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

An advantage of this intermediary format is its ability to represent arrays, using integers for indices and strings for object attributes:

hydrate([
  [[0, 'foo', 'bar', 0, 'qux'], 42], 
  [[0, 'foo', 'bar', 1, 'qux'], 43], 
  [[0, 'foo', 'baz'], 6],
  [[1, 'foo', 'bar', 0, 'qux'], 44], 
  [[1, 'foo', 'bar', 1, 'qux'], 45], 
  [[1, 'foo', 'baz'], 7],  
]) //=> 
// [
//   {foo: {bar: [{qux: 42}, {qux: 43}], baz: 6}}, 
//   {foo: {bar: [{qux: 44}, {qux: 45}], baz: 7}}
// ]

To utilize this feature effectively, we might require a more intricate string format like { '[0].foo.bar[0].qux': 42 } along with a parser that surpasses k.split ('.'). Although not overly complex, addressing the more sophisticated system permitting arbitrary string keys – including quotes, brackets, and periods – would lead us down a more elaborate path.

Answer 6

The approach presented here shares similarities with Mulan's answer, but takes a different approach to dividing responsibilities. It introduces an intermediate format referred to as pathEntries, which resembles the output of Object.entries but includes complete paths instead of just top-level properties. In this example, it appears as follows:

[['person', 'data', 'info', 'more', 'favorite'], 'smth']

The expand function utilizes Object.entries on the input, splits keys based on dots, and then applies hydrate to the resultant data. The hydrate function, a fundamental aspect of my toolset, acts as a thin covering for setPath, consolidating path entries into a single object. Its structure is demonstrated below:

const setPath = ([p, ...ps]) => (v) => (o) =>
  p == undefined ? v : Object.assign(
    Array.isArray(o) || Number.isInteger(p) ? [] : {},
    {...o, [p]: setPath(ps)(v)((o || {})[p])}
  )

const hydrate = (xs) =>
  xs.reduce((a, [p, v]) => setPath(p)(v)(a), {})

const expand  = (o) =>
  hydrate(Object.entries(o).map(([k, v]) => [k.split('.'), v]))

console.log(expand({'person.data.info.more.favorite': 'smth'}))

const input = {"server.host": "localhost", "server.port": 9999, "database.host": "localhost", "database.name": "mydb", "database.port": 7777, "database.user": "root", "debug.log": true}

console.log(expand(input))

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

An advantage of this intermediary format is its ability to represent arrays, using integers for indices and strings for object attributes:

hydrate([
  [[0, 'foo', 'bar', 0, 'qux'], 42], 
  [[0, 'foo', 'bar', 1, 'qux'], 43], 
  [[0, 'foo', 'baz'], 6],
  [[1, 'foo', 'bar', 0, 'qux'], 44], 
  [[1, 'foo', 'bar', 1, 'qux'], 45], 
  [[1, 'foo', 'baz'], 7],  
]) //=> 
// [
//   {foo: {bar: [{qux: 42}, {qux: 43}], baz: 6}}, 
//   {foo: {bar: [{qux: 44}, {qux: 45}], baz: 7}}
// ]

To utilize this feature effectively, we might require a more intricate string format like { '[0].foo.bar[0].qux': 42 } along with a parser that surpasses k.split ('.'). Although not overly complex, addressing the more sophisticated system permitting arbitrary string keys – including quotes, brackets, and periods – would lead us down a more elaborate path.

Create a layered structure using a specified path

Answer №1

Answer №2

Answer №3

Similar questions

A step-by-step guide on setting up flow types for @material-ui/core version 4

What is the best way to vertically align an InputLabel within a MUI Grid item?

What is the reason for multiple ajax functions being triggered when submitting a form through ajax?

Navigating the world of gtag and google_tag_manager: untangling

Recognize different HTML components when an event occurs

Error: npx is unable to locate the module named 'webpack'

Angular has the ability to round numbers to the nearest integer using a pipe

Arranging JSON information based on category

What is the best way to initiate the handling of newly inserted values in a Vuex store?

Warning: The use of 'node --inspect --debug-brk' is outdated and no longer recommended

Creating a sticky header for a MatTable in Angular with horizontal scrolling

Dynamic Visibility Control of GridPanel Header in ExtJS

"Facing an issue with Google Chrome not refreshing the latest options in an HTML select dropdown list

Extracting Querystring Value in C#

The state value is not preserved after redirecting to another page

Expanding/Combining entities

"Incorporate keyframes to create a mouseleave event with a distinctive reverse fade

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Inconsistencies in grunt-ng-constant target operations

How to organize initial, exit, and layout animations in Framer Motion (React) tutorial?