Is there a way to efficiently return an array of object and nested object keys with their full paths through recursion

My grasp of JS is still in its early stages, so understanding how the stack and recursion function can be challenging for me at this point. The task at hand involves displaying an array of object keys, including the parent object name if the object is nested.

For instance, consider the following object:

{
    a: {
        b: 2,
        q: [0, 3, 4],
    },
    x: true,
    d: { f: null,
         c: 'something' 
        }
}

The goal is to generate an array of keys as follows:

[
  'a.b',   'a.q',
  'a.q.0', 'a.q.1',
  'a.q.2', 'x',
  'd.f',   'd.c'
]

It's evident that nested keys should have a fully qualified name, separated by a dot from the parent name.

I managed to solve this issue but with extensive conditional statements and loops, tailored specifically for this object. Any added nesting would make the function non-functional.

function getKeysArray(obj) {
    let array = [];
    for (const key of Object.keys(obj)) {
        if (typeof obj[key] !== 'object') {
            array.push(key);
        }
        let internObj = obj[key];
        
        if (typeof internObj === 'object') {
            for (const innerKey of Object.keys(internObj)) {
                array.push(`${key}.${innerKey}`);
                let mostInnerKey = internObj[innerKey];

                if (typeof mostInnerKey === 'object' && internObj[innerKey] !== null) {
                    for (const index of Object.keys(mostInnerKey)) {
                        array.push(`${key}.${innerKey}.${index}`)
                    }
                }
            }
        }
    }
    return array;
}

While I've solved a similar problem involving values instead of keys using recursion, doing the same for this challenge seems perplexing to me.

Although I've come across solutions on StackOverflow for similar problems, none required displaying full key names in this manner.

Answer №1

To solve this problem, one approach is to use recursion to explore objects within the data.

const
    findPaths = obj => Object
        .entries(obj)
        .flatMap(([key, value]) => value && typeof value === 'object'
            ? findPaths(value).map(path => `${key}.${path}`)
            : key
        ),
    sampleData = { a: { b: 2, q: [0, 3, 4] }, x: true, d: { f: null, c: 'something' } },
    paths = findPaths(sampleData);

console.log(paths);

Answer №2

const data = {"a":{"b":2,"q":[0,3,4]},"x":true,"d":{"f":null,"c":"something"}}

const flattenObject = (obj, prefix='') => {
  return Object.entries(obj).flatMap(([key, value]) => [
    ...(Array.isArray(value) || !(value instanceof Object)) ? [`${prefix}${key}`] : [],
    ...(value instanceof Object) ? flattenObject(value, `${prefix}${key}.`) : []
  ]);
};

console.log(flattenObject(data));

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an AJAX request in Play 2.x by using a shared button

Although I have successfully utilized AJAX requests in the past using a form and adding return false to prevent page refresh, I recently encountered an issue when moving my JavaScript into a separate file. The @ commands now fail, making it difficult for m ...

make the chosen text appear on Internet Explorer

1 How to insert text into a text box using code? 2 Moving the caret to the end of the text. 3 Ensuring the caret is visible by scrolling the text box content. 4 Programmatically selecting specific text in a textbox. 5 **How to make selected text visible?** ...

Does element.click() in Protractor's Webdriver method return a promise, or is there a way for it to handle errors?

Is the element(by.css()).click() method returning a promise, or is there a way to catch and assert against any errors that may occur? In my scenario, I have a component that is not clickable, and I want to handle the error when this happens. I also want t ...

Using jQuery to load content with a dynamic variable instead of specific element IDs

I am facing a minor jQuery issue. I am trying to load a specific area of an external HTML document into a div, but instead of loading just that particular area, the entire document is being loaded. Here's the code snippet for the trigger: $('a& ...

retrieving data from GET variables and sending to a PHP array

Is there a way to retrieve form variables and store them in an array in memory without reloading the page? I'm not very experienced with this, so any guidance would be appreciated. My goal is to update a JSON file using PHP based on form inputs. JSON ...

Working with time durations in JavaScript

Is there a way to calculate the duration between a start time and an end time including both hours and minutes? Currently, I have code that only provides me with the hours. Is there any modification I can make to include minutes as well? If so, what chan ...

Addressing the issue of empty ngRepeat loops

Utilizing ngRepeat to generate table rows: <tr ng-repeat="User in ReportModel.report" on-finish-render> <td><span>{{User.name}}</span></td> </tr> An on-finish-render directive triggers an event upon completion of t ...

`Implementing Typescript code with Relay (Importing with System.js)`

Is there a way to resolve the error by including system.js or are there alternative solutions available? I recently downloaded the relay-starter-kit (https://github.com/relayjs/relay-starter-kit) and made changes to database.js, converting it into databas ...

What causes my slider to speed up with an increase in items and slow down with fewer items in bxslider?

Find more information here jQuery('.homepage_slider').bxSlider( { minSlides: 1, maxSlides: 4, slideWidth: 200, slideMargin: 30, ...

I encountered a 404 Error message while attempting to access a specific express route

My Angular CLI generated app is running with an Express.js and MongoDB server. After running npm start, I can access http://localhost:3000, which routes to my homepage. The other links on the navbar work well to control routes, e.g., http://localhost:3000/ ...

The distinction between a keypress event and a click event

Due to my eyesight challenges, I am focusing on keyboard events for this question. When I set up a click event handler for a button like this: $("#button").on("click", function() { alert("clicked"); }); Since using the mouse is not an option for me, ...

AngularJS directive not registering event after model update

Within my angularjs application, I have implemented an element directive that is equipped with an event listener. This listener is designed to respond to a broadcast event from the controller. app.directive('listItem', function(){ return { ...

Canvg | Is there a way to customize canvas elements while converting from SVG?

Recently, I encountered an issue with styling SVG graphics dynamically generated from data. The SVG graphic appears like this: https://i.sstatic.net/xvIpE.png To address the problem, I turned to Canvg in hopes of converting the SVG into an image or PDF us ...

Converting an Array into a String

Struggling to transfer a MYSQL associative array into a PHP array and encountering the following error: Error message: Array to String type conversion Code snippet: $sql="SELECT brand_id FROM brand WHERE (name IS NOT NULL OR name != '') AND ...

How can I silence the warnings about "defaultProps will be removed"?

I currently have a next.js codebase that is experiencing various bugs that require attention. The console is currently displaying the following warnings: Warning: ArrowLeftInline: Support for defaultProps will be removed from function components in a futur ...

How can one pass req.validationErrors() from the backend to the frontend with Express Validator?

Hello and thank you for taking the time to read this. I am currently trying to implement express-validator in my project. It's working well as it blocks posts if, for example, the name input is empty. However, I'm struggling to display the error ...

Tips for overcoming a script error within the body of a Next.js project

I encountered an error in my _document.js file when trying to add a script to the body of my document. Here is the specific error message that was returned: https://i.stack.imgur.com/QG5zb.png ./pages/_document.js Error: x Expected '}', got &a ...

Using an Ajax XML object to dynamically set images in a DataList

When making an Ajax call to retrieve an XML response and trying to set image names from the XML on a datalist, I encountered some issues. The code snippet I used for setting the image is as follows: $(".Image", tablex).attr('src', product.find( ...

Struggling to vertically align elements within iron-pages

Struggling to vertically center the content within iron-pages (nested in a paper-drawer-panel). Check out the code snippet below: <paper-drawer-panel id="drawerPanel" responsive-width="1280px"> <div class="nav" drawer> <!-- Nav Conte ...

When attempting to run the npm install mathjs command, an error is displayed

Trying to install mathjs using npm but encountering an error: npm install mathjs The error message received is as follows: npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write npm WARN tar TAR_ENTRY_ERROR UNKNOWN: unknown error, write npm WARN tar T ...