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

"Exploring the methods to retrieve Firebase authentication error details and outputting the console log message along with

Tips for effectively utilizing URLSearchParams in Angular 5 HttpClient's "get" function

Learn how to implement React Redux using React Hooks and correctly use the useDispatch function while ensuring type-checking

The factory class is responsible for generating objects without specifying their type

The TypeScript error code TS2339 is indicating that the 'modal' property is not recognized on the type 'JQuery'

Testing in Vue revealed an unexpected absence of data

Why does Angular throw a length-related error, while I am able to retrieve the length using console log if needed?

Error with the type of CanvasGradient in the NPM package for converting text to image

Retrieving data from a form input that utilizes reactive checkboxes

Sharing the label element as a prop in React component

Inquiring about Vue 3 with TypeScript and Enhancing Types for Compatibility with Plugins

What might be causing my action function to be triggered during the rendering process?

Error encountered while retrieving data from Firebase and storing it in an array within an IONIC application

execute a rigorous compilation during the ng build angular process

Is ngOnDestroy executed within Angular services?

Passing an observable from parameters to a pipe in RxJS: A guide

Modify the color of the matSnackbar

A guide on implementing TypeScript with React Native's platform-specific extensions

Having trouble with customizing a selected ListItemButton in Material-UI - need some help with

Am I utilizing Angular's signals correctly? And what is the purpose of still requiring ChangeDetectorRef.detectChanges()?