Accessing nested objects within an array using lodash in typescript

Question

Accessing nested objects within an array using lodash in typescript

After analyzing the structure of my data, I found it to be in this format:

{property: ["a","b"], value : "somevalue" , comparison : "somecomparison"}

I am looking for a way to transform it into a nested object like so:

{
  "properties": {
    "a": {
      "properties": {
         "b": {
            "somecomparision": "somevalue"
           }
         }
       }
     }

What would be the most effective approach to implement this nested structure?

  {
      properties: {
        [property[0]: {
          [comparison]: value,
        },
      },
    }

typescript lodash

Answer 1

Answer №1

To enhance the functionality of arrays, you can utilize the Array.flatMap() method to include a 'properties' key within the property array. After that, combine the comparison value with the array and leverage the Array.reduceRight() function to construct the final object. You can experiment with this in the TypeScript playgroundhere:

const fn = ({ property, value, comparision }) =>
  property
    .flatMap(p => ['properties', p])
    .concat(comparision)
    .reduceRight((acc, p) => ({ [p]: acc }), value)

const obj = {property: ["a","b"] , value : "somevalue" , comparision : "somecomparison"}

const result = fn(obj)

console.log(result)

Incorporating lodash libraries expands your capabilities further by introducing the _.set() function:

const fn = ({ property, value, comparision }) => 
  _.set(
    {}, 
    _.flatMap(property, p => ['properties', p]).concat(comparision),
    value
  )
  
const obj = {property: ["a","b"] , value : "somevalue" , comparision : "somecomparison"}

const result = fn(obj)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 2

To enhance the functionality of arrays, you can utilize the Array.flatMap() method to include a 'properties' key within the property array. After that, combine the comparison value with the array and leverage the Array.reduceRight() function to construct the final object. You can experiment with this in the TypeScript playgroundhere:

const fn = ({ property, value, comparision }) =>
  property
    .flatMap(p => ['properties', p])
    .concat(comparision)
    .reduceRight((acc, p) => ({ [p]: acc }), value)

const obj = {property: ["a","b"] , value : "somevalue" , comparision : "somecomparison"}

const result = fn(obj)

console.log(result)

Incorporating lodash libraries expands your capabilities further by introducing the _.set() function:

const fn = ({ property, value, comparision }) => 
  _.set(
    {}, 
    _.flatMap(property, p => ['properties', p]).concat(comparision),
    value
  )
  
const obj = {property: ["a","b"] , value : "somevalue" , comparision : "somecomparison"}

const result = fn(obj)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Accessing nested objects within an array using lodash in typescript

Answer №1

Similar questions

Using vuex-class to interact with Vuex in non-Vue components

Enhance the aesthetic appeal of the imported React component with added style

A collection of objects in TypeScript with a reference and the ability to add new objects using the

Typescript interface designed for objects containing certain optional property names as well as unspecified property names

Encountering an issue with a custom hook causing an error stating "Attempting to access block-scoped variable 'X' before its declaration."

Identifying Angular 2 templates post-file separation: a step-by-step guide

Issue with calling a function to change the CSS color class of a button in Angular

Recursively map elements of a TypeScript array to keys of an object

Encountering Compilation Issues Post Upgrading to Angular 9

What is the best way to increase the size of an array and populate it with just one specific element in Types

Challenges when building a production version of an Expo app with Typescript

Creating a gradient background with the makeStyles function

Breaking down large reducer into smaller reducers

Creating a custom type for the parameter of an arrow function in Typescript

You cannot assign multiple properties with the same name to an object literal

Obtain data from a single module and incorporate it into a different one

What is the capability of dynamically generating an index in Typescript?

`Mapping child routes in Angular using basic components`

Storing and Retrieving User Identifiers in Next.js

Prevent ESLint from linting files with non-standard extensions