Increase a variable within a recursive javascript function

Question

Increase a variable within a recursive javascript function

I have a series of data stored in a variable:

let groups = [
    {
        name: "x",
        selected: false,
        elements: [
            {
                name: "xa",
                selected: false
            },
            {
                name: "xb",
                selected: true
            },
            {
                name: "xc",
                selected: true
            },
            {
                name: "xd",
                selected: false
            }
        ]
    },
    {
        name: "y",
        selected: false,
        elements: [
            {
                name: "ya",
                selected: false
            },
            {
                name: "yb",
                selected: true
            },
            {
                name: "yc",
                selected: true
            },
            {
                name: "yd",
                selected: false
            }
        ]
    }
];

I am looking to determine the number of items with selected = true.
I have created this function for that purpose:

function countSelected(groups, counter = 0) {
    for (let i = 0; i < groups.length; i++) {
        const group = groups[i];
        if (group.selected) {
            counter++;
        }
        if (group.elements && group.elements.length) {
            group.elements.forEach(item => countSelected([item], counter));
        }
    }
    return counter;
}

However, it consistently displays a result of 0.

A functional jsFiddle example

javascript arrays object recursion

Answer 1

Answer №1

To calculate the total number of selected nodes, a recursive reduce function can be utilized.

const
    countSelectedNodes = (sum, obj) => (obj.nodes || []).reduce(countSelectedNodes, sum + obj.selected);

let categories = [{ name: "a", selected: false, nodes: [{ name: "aa", selected: false }, { name: "ab", selected: true }, { name: "ac", selected: true }, { name: "ad", selected: false }] }, { name: "b", selected: false, nodes: [{ name: "ba", selected: false }, { name: "bb", selected: true }, { name: "bc", selected: true }, { name: "bd", selected: false }] }],
    count = categories.reduce(countSelectedNodes, 0);

console.log(count);

Answer 2

To calculate the total number of selected nodes, a recursive reduce function can be utilized.

const
    countSelectedNodes = (sum, obj) => (obj.nodes || []).reduce(countSelectedNodes, sum + obj.selected);

let categories = [{ name: "a", selected: false, nodes: [{ name: "aa", selected: false }, { name: "ab", selected: true }, { name: "ac", selected: true }, { name: "ad", selected: false }] }, { name: "b", selected: false, nodes: [{ name: "ba", selected: false }, { name: "bb", selected: true }, { name: "bc", selected: true }, { name: "bd", selected: false }] }],
    count = categories.reduce(countSelectedNodes, 0);

console.log(count);

Answer 3

Answer №2

One reason is that when Number (and other primitives) arguments are passed to a function, they are duplicated, creating a completely new variable with the argument's value.

To work around this issue, you can either use the return value of your function and add it up, or use Objects as arguments since they are passed by reference, allowing you to maintain the same object:

let categories = [{name: "a",selected: false,nodes: [{name: "aa",selected: false},{name: "ab",selected: true},{name: "ac",selected: true},{name: "ad",selected: false}]},{name: "b",selected: false,nodes: [{name: "ba",selected: false},{name: "bb",selected: true},{name: "bc",selected: true},{name: "bd",selected: false}]}]

function getSelectedWithObject(categories, counter = {val: 0}) {
    for (let index = 0; index < categories.length; index++) {
        const category = categories[index]
        if (category.selected) {
            counter.val++
        }
        if (category.nodes && category.nodes.length) {
            category.nodes.forEach(cat => getSelectedWithObject([cat], counter))
        }
    }
    return counter.val
}

function getSelectedWithReturnValue(categories) {
    let counter = 0
    for (let index = 0; index < categories.length; index++) {
        const category = categories[index]
        if (category.selected) {
            counter++
        }
        if (category.nodes && category.nodes.length) {
            category.nodes.forEach(cat => counter += getSelectedWithReturnValue([cat]))
        }
    }
    return counter
}

console.log(getSelectedWithObject(categories))
console.log(getSelectedWithReturnValue(categories))

Answer 4

One reason is that when Number (and other primitives) arguments are passed to a function, they are duplicated, creating a completely new variable with the argument's value.

To work around this issue, you can either use the return value of your function and add it up, or use Objects as arguments since they are passed by reference, allowing you to maintain the same object:

let categories = [{name: "a",selected: false,nodes: [{name: "aa",selected: false},{name: "ab",selected: true},{name: "ac",selected: true},{name: "ad",selected: false}]},{name: "b",selected: false,nodes: [{name: "ba",selected: false},{name: "bb",selected: true},{name: "bc",selected: true},{name: "bd",selected: false}]}]

function getSelectedWithObject(categories, counter = {val: 0}) {
    for (let index = 0; index < categories.length; index++) {
        const category = categories[index]
        if (category.selected) {
            counter.val++
        }
        if (category.nodes && category.nodes.length) {
            category.nodes.forEach(cat => getSelectedWithObject([cat], counter))
        }
    }
    return counter.val
}

function getSelectedWithReturnValue(categories) {
    let counter = 0
    for (let index = 0; index < categories.length; index++) {
        const category = categories[index]
        if (category.selected) {
            counter++
        }
        if (category.nodes && category.nodes.length) {
            category.nodes.forEach(cat => counter += getSelectedWithReturnValue([cat]))
        }
    }
    return counter
}

console.log(getSelectedWithObject(categories))
console.log(getSelectedWithReturnValue(categories))

Answer 5

Answer №3

counter is defined as an integer and passed by value in this scenario. Set the counter variable to store the desired result from the function like so:

function getSelected(categories) {
    var counter = 0;
    for (let index = 0; index < categories.length; index++) {
        const category = categories[index];
        if (category.selected) {
           counter++;
        }
        if (category.nodes && category.nodes.length) {
           category.nodes.forEach(cat => counter += getSelected([cat]));
        }
    }
    return counter;
}

console.log(getSelected(categories));

Answer 6

counter is defined as an integer and passed by value in this scenario. Set the counter variable to store the desired result from the function like so:

function getSelected(categories) {
    var counter = 0;
    for (let index = 0; index < categories.length; index++) {
        const category = categories[index];
        if (category.selected) {
           counter++;
        }
        if (category.nodes && category.nodes.length) {
           category.nodes.forEach(cat => counter += getSelected([cat]));
        }
    }
    return counter;
}

console.log(getSelected(categories));

Increase a variable within a recursive javascript function

Answer №1

Answer №2

Answer №3

Similar questions

Tallying outcomes using JavaScript

Function compilation did not succeed in the module

Keyboard-enabled jQuery function to smoothly scroll the page to a specified heading

Change the class name using jQuery when scrolling

add an svg string element to a pre-existing svg element

get a duplicate of an object

Ajax request and the Ghostery extension in Firefox

Struggling with a component that won't load in JSX?

How to show multiline error messages in Materials-UI TextField

The disabled feature doesn't seem to be functioning properly with the <i> tag when using Font Awesome icons

What is going on with the current status of these two arrays?

Dependencies in Angular

What is the best way to retrieve the values from the labels for two separate buttons?

Top location for securely storing information in Angular 8

What is the best way to invoke React component code from renderer.js?

What is the best way to establish a connection between the same port on Expressjs and Socket.io

What is the best way to save the data from a char* pointer?

How can I show the unique phrase "Today" on a specific date (date=today) with the Angular-UI-Bootstrap Datepicker?

Invoking a function within the directive's controller

JSON object name