Recursive javascript function issue (WeWeb freezes)

Hello, I’m running a custom JavaScript code on my app that builds a complex JSON object based on an array of elements that are related to each other hierarchically, but I’m facing a bug or issue or limitation that freezes the WeWeb editor.

Anyone else had this issue? Or maybe someone from WeWeb to shed some light on the matter?
It looks to me like something that won’t matter after deploying, but it’s a major issue for development.

The browser console log shows the following message:

This happens when I click on to edit the workflow below:

The code I’m executing is composed of two javascript functions and an action to store the result of the second function on a variable. Only this second javascript code has a recursion, that executes 8 times with the test data:

const json_build_function = (
    blocks,
    parent = null
) => {
    // If parent is null, get the main parent
    if (!parent) {
        parent = blocks.find(item => (item.parent_id==null));
    }

    // Get children from the parent
    const children = blocks
        .filter(item => (item.parent_id==parent.id))
        .sort((a,b) => (a.order - b.order));

    // Process children of children
    if (children.length > 0) {
        parent.children = children.map(child => {
            const children = json_build_function(blocks, child);
            if (children) Object.assign(child.children, children);
            return child;
        })
    } else {
        return undefined;
    }

    // Retorn parent
    return parent
}

I think you’re not handling the exiting the loop properly, but it’s hard to tell without testing it with data.

I thought so too. But when I put a console.log on the function to see how many times it was running, it didn’t indicate an infinite loop. It ran 8 times, as expected.

Here is some dummy data that also generated the error:

const data = [
	{
		"id": 2,
		"name": "Parent",
		"parent_id": null,
		"type": {
			"id": 1,
		}
	},
	{
		"id": 3,
		"name": "Child 1",		
		"parent_id": 2,
		"type": {
			"id": 2,
		}
	},
	{
		"id": 4,
        "name": "Child 2",
		"parent_id": 2,
		"type": {
			"id": 3,
		}
	},
	{
		"id": 9,
		"name": "Sub-child 1",
		"parent_id": 6,
		"type": {
			"id": 2,
		}
	},
	{
		"id": 5,
		"name": "Child 3",
		"parent_id": 2,
		"type": {
			"id": 4,
		}
	},
	{
		"id": 6,
		"name": "Test Group 1",
		"parent_id": 5,
		"type": {
			"id": 5,
		}
	},
	{
		"id": 7,
		"name": "Teste Group 2",
		"parent_id": 5,
		"type": {
			"id": 6,
		}
	},
	{
		"id": 8,
		"name": "Sub-child 2",
		"parent_id": 7,
		"type": {
			"id": 3,
		}
	}
]

I think I found the issue. You’re passing the same array as blocks in

So it goes like this, and it never exits the loop, because it’s always true (children.length > 0).

It logs the following when I log blocks.length, blocks in the if(children.length >0) block

I thought about that too, but actually the “children” array is generated by the filter right above it, filtering all the “blocks” with a “parent_id” value equal to the current “parent_id” of the function parameter.

To when the function reaches a “child” that has no “children”, “children.length” would be 0.

I’m not sure why there were so many logs on your console though. On mine it always sticks to 8. Executing the code on VS Code it runs without issues too.

The logs show that your function is going past the if(!parent) and it goes straight to the children.length if block. It seems like it’s passing the same thing all over and over again. Can’t tell you much more without actually digging into your context etc, which is out of the scope of this forum I think.