Follow every branch of nested object nodes in the tree

I am facing a challenge with extracting sublevels from a complex object and I am unsure about how to achieve it. I have heard about recursion but I am not sure how to implement it.

Here is the object in question :

.com/m2dkiHkD

This object is derived from a table where the qLeft represents dimensions displayed in the first column of the table, similar to this:

Original table

My goal is to generate something like this:

Objective

I plan to create an array containing the new rows extracted from the complex object so that I can add them to my new table.

Any suggestions would be greatly appreciated. Thank you.

Answer №1

In order to achieve your goal, it seems that a recursive data structure may not be necessary for the task at hand. The key lies in traversing the data and identifying the specific information you require. Understanding which data is needed and devising a strategy to locate it poses the main challenge.

Here is a possible starting point for your endeavor:

// In case there are multiple elements within qPivotDataPages, iteration is required 
// to call 'process' for each one and then merge the resulting arrays.
const data = json.qPivotDataPages[0].qLeft;

const result = process(data);

function process(input) {
    const [team1, team2] = input;
    const team1Results = processTeam(team1);
    const team2Results = processTeam(team2);
    return [...team1Results, ...team2Results];
}

function processTeam(teamData) {
    const teamResults = [];

    const teamName = teamData.qText;
    const halfDatas = teamData.qSubNodes.filter((item) => item.qText === '1st' || item.qText === '2nd' || item.qText === 'InCia');

    halfDatas.forEach((halfData) => {
        const half = halfData.qText;

        halfData.qSubNodes.forEach((item) => {
            if (item.qText === 'MI' || item.qText === 'ME') {
                teamResults.push({
                    team: teamName,
                    half: half,
                    type: item.qText,
                });
            }
        });
    });

    return teamResults;
}

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

Tips for modifying a class to accept a range of parameters from diverse functions

In my current Typescript project, I have implemented a builder to create objects for various methods. I am striving to make the builder adaptable for all methods in order to streamline the process without creating additional classes. At present, I have tw ...

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...

What is the functioning process of the angular method decorator?

The tutorial on creating custom decorators in Angular introduces a throttle decorator that utilizes the lodash throttle function. The implementation of this decorator can be seen below: import t from 'lodash.throttle'; export function throttle( ...

Is it possible to store a JavaScript object (including methods) within MongoDB?

I am looking for a solution to store objects containing text formatting methods and CSS styles in a MongoDB collection using Mongoose. The structure of the objects I have is more complex than this example: const myStyle = { book: { templates: ...

When the "x" close icon is clicked, the arrow should toggle back to 0 degrees

I've been tackling the challenge of creating an accordion and I'm almost there. However, I'm facing an issue where the arrow doesn't return to its original position after clicking the close "x" icon. The toggle works fine but the arrow ...

Executing MongoDB CRUD operations outside of the async run function in JS: A step-by-step guide

Here is a sample code snippet showcasing the default async run function for the MongoDB JS driver: async function run() { try { await client.connect(); const database = client.db('sample_mflix'); const movies = database.collection(& ...

Tips for addressing dependency issues in react native applications

Starting a new ReactNative project using "react-native init newProject" is giving me some warnings. How can I resolve these issues? npm WARN deprecated [email protected]: core-js@<2.6.5 is no longer maintained. Please, upgrade to core-js@3 o ...

Sending a Set from a Node.js backend to the front end using socket.io

Why is it that when sending data from a Node.js backend to the frontend using socket.io, a set object is being converted into an empty object? Could this issue be related to JSON limitations, a bug in socket.io, or possibly a bug in Node.js? On the fronte ...

JavaScript - Retrieving nested elements within a JSON structure

Currently, I am dealing with a set of 4 JSON objects that contain nested data within them. These objects are all stored in an array named classes. Below is an example showcasing the format of one of these class objects: let class_A = { professor: " ...

Implementing a jQuery method in a PHP page that is loaded through AJAX

I am facing an issue on my page where I am using jquery/ajax to load a series of buttons into a div. This script loads buttons every time the user scrolls the page and each button should run a jquery function when clicked. The problem arises when I switche ...

inject the parameter into the embedded href using the following code: `javascript:function(" + param + ");`

I'm attempting to incorporate a call to a JavaScript function within a Leaflet popup. The objective is to link the showPopup() function to each feature added to the map. When the user clicks on a feature, there should be an "More info..." hyperlink th ...

Issue encountered while trying to utilize the reset function of the FormGroup with the angular2-tinymce plugin

I utilized the FormGroup feature to construct my form, and I required a textarea component. I decided to use the angular2-tinymce library/package to create the form. Here is my HTML template: <form (submit)="submitCallLog($event)" [formGroup]="callLo ...

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

What could be causing my input box to act strangely when users attempt to input information?

I seem to be facing an unusual issue with the <input onChange={this.handleArticleId} value={this.props.articleIdValue} placeholder="article id"/> field. Whenever I try typing something, the letter only appears in the input box after clicking on the s ...

Receiving a null result when parsing a JSON file from a URL in JavaScript

My data loading query loads JSON data without any issues, as shown in this snippet: $(document).ready(function () { var json = [{"id":1,"first_name":"Debra","last_name":"Rodriguez","email":"[email protected]","gender":"Female","ip_address":"90. ...

Validating URL patterns in JavaScript using Ajax

Below are the ajax urls displayed in a specific format: http://example.com/v1/components/compId http://example.com/v1/machine/machineId http://example.com/v1/graph/startTime=value?endtime=value http://example.com/v1/graph/startDate=value?enddate=value? ...

Is it possible to invoke a JavaScript function from within a CSS file?

Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...

Investigate duplicate elements within nested arrays using the 3D array concept

I am dealing with an array that contains 3 subarrays. Arr = [[arr1],[arr2],[arr3]] My task is to identify and store the duplicate values found in these subarrays ([arr1],[arr2],[arr3]) into a separate array. Arr2 = [ Duplicate values of arr 1,2,,3 ] What ...

A guide to efficiently eliminating UI elements with React JS

Struggling to find clear instructions on removing UI components in React? Take a common scenario: there's a login form that should disappear after the user submits it. How can this be achieved? Although unmountComponentAtNode exists, it seems like it ...