Javascript - динамически генерировать бесконечно вложенный массив из плоского массива

Question

У меня есть список сотрудников, которые я получаю по запросу AJAX со стороны сервера, и каждый элемент в этом списке является родительским для элемента под ним, кроме последнего потомка, поэтому на стороне клиента я получаю массив JavaScript, подобный этот:

data = [
{ FirstName: "John", LastName: "Doe", Position: "Manager", ID: "5656" },
{ FirstName: "Sam", LastName: "Doe", Position: "Sale", ID: "654654" },
{ FirstName: "Sarah", LastName: "Doe", Position: "Employee", ID: "6541" },
{ FirstName: "Sally", LastName: "Doe", Position: "Clerk", ID: "8754" },
{ FirstName: "Joe", LastName: "Doe", Position: "Clerk", ID: "654564" }
];

Пока все хорошо, теперь моя проблема в том, что я хочу использовать bootstrap-treeview, а этому компоненту нужен массив JavaScript, подобный этому:

var tree = [
  {
      text: "John - Manager",
      nodes: [
        {
            text: "Sam - Sale",
            nodes: [
              {
                  text: "Sarah - Employee",
                  nodes: [
                      {
                          text: "Sally - Clerk",
                          nodes: [
                              {
                                  text: "Joe - Clerk"
                              }
                          ]
                      }
                  ]
              }
            ]
        }
      ]
  }
];

Мое дерево не является статичным, поэтому я должен генерировать его динамически, как я могу динамически генерировать бесконечно вложенный массив, подобный этому, используя JavaScript?

Answer 1

Особенности этого предложения Array.prototype.reduceRight(),

reduceRight() Метод применяет функцию к аккумулятору, и каждое значение массива (справа налево) должно сводить его к одному значению.

var data = [
        { FirstName: "John", LastName: "Doe", Position: "Manager", ID: "5656" },
        { FirstName: "Sam", LastName: "Doe", Position: "Sale", ID: "654654" },
        { FirstName: "Sarah", LastName: "Doe", Position: "Employee", ID: "6541" },
        { FirstName: "Sally", LastName: "Doe", Position: "Clerk", ID: "8754" },
        { FirstName: "Joe", LastName: "Doe", Position: "Clerk", ID: "654564" }
    ],
    tree = data.reduceRight(function (r, a) {
        var o = { text: a.FirstName + ' - ' + a.Position };
        if (r) {
            o.nodes = r;
        }
        return [o];
    }, undefined);

document.write('<pre>' + JSON.stringify(tree, 0, 4) + '</pre>');

Или использовать Array.prototype.reduce(),

reduce() Метод применяет функцию к аккумулятору и каждому значению массива (слева направо), чтобы уменьшить его до одного значения.

var data = [
        { FirstName: "John", LastName: "Doe", Position: "Manager", ID: "5656" },
        { FirstName: "Sam", LastName: "Doe", Position: "Sale", ID: "654654" },
        { FirstName: "Sarah", LastName: "Doe", Position: "Employee", ID: "6541" },
        { FirstName: "Sally", LastName: "Doe", Position: "Clerk", ID: "8754" },
        { FirstName: "Joe", LastName: "Doe", Position: "Clerk", ID: "654564" }
    ], tree = [];

data.reduce(function (r, a) {
    var o = { text: a.FirstName + ' - ' + a.Position, nodes: [] };
    r.push(o);
    return o.nodes;
}, tree);

document.write('<pre>' + JSON.stringify(tree, 0, 4) + '</pre>');

Разница между этими двумя предложениями заключается в том, что в первом случае итерация и построение массива / объекта из последней строки и возвращение всегда представляют собой полное дерево.

Второе предложение содержит заданный массив и возвращает ссылку на включенную строку / узлы. Схема здания от первого ряда до последнего, в отличие от первого предложения.

Недостатком второго решения является пустой массив nodes,