Двоичный выпуск дерева. Два отсутствующих пользователя из userTree ведут к 29 пользователям, в то время как должно было быть 31 пользователь в дереве 5 уровней

Question

База данных возвращает массив объектов, и я перебираю его, чтобы все пользователи сформировали его.
USER1 находится наверху дерева, и у него есть суб-пользователи с именами st1 и nd2, которые также получили своих двух суб-пользователей и т. Д. Как вы видите, бинарное дерево 5 уровня имеет 31 пользователя, но userArray имеет только 29 пользователей. это означает, что два пользователя отсутствуют. Это приводит к несоответствию внутри дерева и смещению пользователей.

Я посчитал все st1 и nd2 в массиве, и это 14 st1 и 14 nd2 с топ-пользователем, который дает 29 пользователей, но должно было быть 31 пользователя.

Это разрушает мою логику, и я не могу найти ошибку.

EDIT:

Проплем появляется, когда у пользователя где-то наверху дерева нет подпользователей.

let tree = document.getElementById('tree');

let userTree = [{
    "username": "USER1",
    "income": 1000,
    "st1": {
        "username": "USER2",
        "income": 2000,
        "st1": {
            "username": "USER4",
            "income": 4564560,
            "st1": '',
            "nd2": {
                "username": "USER7",
                "income": 4564560,
                "st1": {
                    "username": "USER10",
                    "income": 4564560,
                    "st1": '',
                    "nd2": ''
                },
                "nd2": {
                    "username": "USER11",
                    "income": 4564560,
                    "st1": '',
                    "nd2": ''
                }
            }
        },
        "nd2": ''
    },
    "nd2": { 
        "username": "USER3",
        "income": 2001,
        "st1": {
            "username": "USER5",
            "income": 40,
            "st1": '',
            "nd2": ''
        },
        "nd2": {
            "username": "USER6",
            "income": 4564560,
            "st1": {
                "username": "USER8",
                "income": 40,
                "st1": '',
                "nd2": {
                    "username": "USER12",
                    "income": 40,
                    "st1": '',
                    "nd2": ''
                }
            },
            "nd2": {
                "username": "USER9",
                "income": 40,
                "st1": {
                    "username": "USER13",
                    "income": 40,
                    "st1": '',
                    "nd2": ''
                },
                "nd2": {
                    "username": "USER14",
                    "income": 40,
                    "st1": '',
                    "nd2": ''
                }
            }
        }
    },
}];

let userArray = [userTree[0]];
let counter = 1;
let rowArray = [];
let counterArr = [];
let usersRow = '';
let rowHTML = '';
let treeRow = '';

const getUsers = (users = {}) => {
    Object.entries(users).forEach(user => {
        let key = user[0];
        let value = user[1];
        if (typeof value == 'object') {
            userArray.push(value);
        } else if (value == '') {
            userArray.push(value);
        }
    });
};


const getSubUsers = (subUser = {}) => {
    for (let i = 0; i < userArray.length; i++) {
        let lastUser = userArray[i];
        getUsers(lastUser);
    }
};

getSubUsers(userArray);
console.log(userArray); // RETURNS 29 USERS NOT 31

for (counter; counter <= userArray.length; counter *= 2) {
    counterArr.push(counter);
    console.log(counter);
}

for (var j = 0; j < counterArr.length; j++) {

    for (var i = 0; i < counterArr[j]; i++) {
        if (userArray[i] === undefined) {
            userArray[i] = '';
        }
        rowArray.push(userArray[i]);
    }
    for (var i = 0; i < counterArr[j]; i++) {
        userArray.shift();
    }

    for (let [key, value] of Object.entries(rowArray)) {
        usersRow += `<div class="userBox"><p>${value.username}</p><p>${value.income}</p></div> \n`;
    }
    treeRow += `<div class="treeRow">${usersRow}</div>`;

    rowArray = [];
    usersRow = '';
}
tree.innerHTML += treeRow;

body {
        display: flex;
        flex-flow: wrap row;
        justify-content: center;
        align-items: center;
        font-family: sans-serif;
    }
    
    #tree {
        display: flex;
        flex-flow: wrap column;
        justify-content: center;
        align-items: center;
        overflow: auto;
    }
    
    .userBox {
        width: 150px;
        height: 150px;
        background-color: #f1f1f1;
        border-radius: 8px;
        display: flex;
        flex-flow: wrap row;
        justify-content: center;
        align-items: center;
        margin: 10px;
    }
    
    .userBox p {
        width: 100%; 
        text-align: center
    }
    
    .treeRow {
        display: flex;
        flex-flow: nowrap row;
        justify-content: space-around;
        align-items: center;
        min-width: 100%;
    }

<div id="tree"></div>