generate html of inifnite depth menu without recursion

Question

I need to create html for treeview from array of unspecified number of nodes. Here is an example

var array = [
    {
        Description: "G",
        Id: 1,
        guid: "c8e63b35",
        parent: null,
        Children: [
            {
                Description: "Z",
                Id: 9,
                guid: "b1113b35",
                parent: "c8e63b35",
                Children: [
                    {
                        Description: "F",
                        Id: 3,
                        guid: "d2cc2233",
                        parent: "b1113b35",
                    }
                ]
            }, 
        ]
    },
    {
        Description: "L",
        Id: 2,
        guid: "a24a3b1a",
        parent: null,
        Children: [
        {
            Description: "K",
            Id: 4,
            guid: "cd3b11caa",
            parent: "a24a3b1a",
        }
    }
]

the result should be

<ul>
    <li id="1" data-guid="c8e63b35">G
        <ul>
            <li id="9" data-guid="b1113b35">Z
                <ul>
                    <li id="3" data-guid="d2cc2233">F
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="2" data-guid="a24a3b1a">L
        <ul>
            <li id="4" data-guid="cd3b11caa">K
            </li>
        </ul>
    </li>
</ul>

I wrote recursion function which generate html correctly in this example but in other cases it works perfectly to 197 depth only. If nested nodes are more than 197 it thrown an exception

"The maximum call stack size"

Is there a way to do this without using recursive functions in JavaScript?

EDIT: Here is my recursion function

    var _generateHTML = function (array, html) {
        for (var i = 0; i < array.length; i++) {
            html += "<li id=\"" + array[i].Id + "\" data-guid=\"" + array[i].guid + "\">" + array[i].Description +
                        "<ul>" + _generateHTML(array[i].Children, "") + "</ul>" +
                    "</li>";
        }
        return html;
    }

I cannot use external libraries because this is for my work. I created this tree using recursive functions earlier. I am wondering if this is possible thats all.

Answer 1

This does the trick (edit: also does indentation):

function indent (num) {
  var INDENT_SIZE = 4
  return new Array(INDENT_SIZE * num + 1).join(" ");
}


function ulli(input) {
    var CLOSE_IT = ['JUST PLEASE DO IT']
    var queue = []

    var output = ""
    var depth = 0;

    queue = queue.concat(input)
    output += "<ul>\n"
    depth++

    while (queue.length > 0) {
        var node = queue.shift()

        if (node == CLOSE_IT) {
            depth--

            output += indent(depth)
            output += "</ul></li>\n"
            continue
        }

        output += indent(depth)
        output += '<li id="' + node.Id + '" data-guid="' + node.guid + '">' + node.Description;

        if (node.Children) {
            depth++
            output += "<ul>\n"
            newQueue = [].concat(node.Children)
            newQueue.push(CLOSE_IT)
            queue = newQueue.concat(queue)
        } else {
            output += "</li>\n"
        }

    }

    output += "</ul>"

    return output
}

Answer 2

Build a queue and add your root elements in it, do a while on the queue and add every child to queue. For putting elements in the correct position, u need to find their parent in dom and then add them to it.

Answer 3

just for the sake of completeness i'm going to provide my solution aswell.
i just want you to know that you can do DOM manipulation to achieve this.

except one small thing that i'm going to try to optimize i like the solution of @franciscod alot.
if my guess is correct i'll just edit his answer.

even though this might not be the fastest solution, this way you are also able to register events to each node right away.

example of it running: http://codepen.io/GottZ/pen/jPKpaP

this includes your raw input from this question: Converting flat structure to hierarchical
as mentioned in this comment: generate html of inifnite depth menu without recursion

in my opinion you should not use an id for every element but thats up to you to decide.

code:

var content = document.getElementById('content');

var flatArray = [
    {
        Description: 'G',
        Id: 1,
        guid: 'c8e63b35',
        parent: null
    },
    {
        Description: 'Z',
        Id: 9,
        guid: 'b1113b35',
        parent: 'c8e63b35'
    },
    {
        Description: 'F',
        Id: 3,
        guid: 'd2cc2233',
        parent: 'b1113b35'
    },
    {
        Description: 'L',
        Id: 2,
        guid: 'a24a3b1a',
        parent: null
    },
    {
        Description: 'K',
        Id: 4,
        guid: 'cd3b11caa',
        parent: 'a24a3b1a'
    }
];

var container = document.createElement('ul');
var allNodes = {};

flatArray.forEach(function (v) {
    var element = document.createElement('li');

    allNodes[v.guid] = {
        element: element
    };

    element.setAttribute('id', v.Id);
    element.setAttribute('data-guid', v.guid);
    element.appendChild(document.createTextNode(v.Description));

    if (!v.parent) {
        container.appendChild(element);
        return;
    }

    var p = allNodes[v.parent];
    if (!p.ul) {
        p.ul = p.element.appendChild(document.createElement('ul'));
    }

    p.ul.appendChild(element);
});

content.appendChild(container);