Lodash - Как создать дерево из плоского массива

Question

Каждый раз, когда загружается мое приложение, я получаю следующее json:

[
  {
    id: 'mALRRY93jASr',
    identifier: '100',
    text: 'Text A'
  },
  {
    id: '7S3xHZEdNcfV',
    identifier: '200',
    text: 'Text B'
  },
  {
    id: '2ZA5xSJeukU6',
    identifier: '300',
    text: 'Text C',
  },
  {
    id: 'bhg3GnLEvw2k',
    identifier: '300.100',
    text: 'Text C - A'
  },
  {
    id: 'bhg3GnLEvw2k',
    identifier: '300.100.100',
    text: 'Text C - A - A'
  },
  {
    id: '2AcXNr4HT388',
    identifier: '300.200',
    text: 'Text C - B'
  }
]

Уровни дерева определяются свойством identifier.

Дерево может иметь тысячидети, поэтому он должен быть рекурсивным.

Как я могу расположить json, используя Lodash , чтобы он выглядел следующим образом json?

[
  {
    id: 'mALRRY93jASr',
    identifier: '100',
    text: 'Text A'
  },
  {
    id: '7S3xHZEdNcfV',
    identifier: '200',
    text: 'Text B'
  },
  {
    id: '2ZA5xSJeukU6',
    identifier: '300',
    text: 'Text C',
    children: [
      {
        id: 'bhg3GnLEvw2k',
        identifier: '300.100',
        text: 'Text C - A',
        children: [
          {
            id: 'bhg3GnLEvw2k',
            identifier: '300.100.100',
            text: 'Text C - A - A'
          }
        ]
      },
      {
        id: '2AcXNr4HT388',
        identifier: '300.200',
        text: 'Text C - B'
      }
    ]
  }
]

Answer 1

Вы можете использовать итеративный подход, ища объекты по тому же пути identifier и построить вложенную структуру.

Этот подход работает и для несортированных данных.

var data = [{ id: 'mALRRY93jASr', identifier: '100', text: 'Text A' }, { id: '7S3xHZEdNcfV', identifier: '200', text: 'Text B' }, { id: '2ZA5xSJeukU6', identifier: '300', text: 'Text C' }, { id: 'bhg3GnLEvw2k', identifier: '300.100', text: 'Text C - A' }, { id: 'bhg3GnLEvw2k', identifier: '300.100.100', text: 'Text C - A - A' }, { id: '2AcXNr4HT388', identifier: '300.200', text: 'Text C - B' }],
    tree = [];

data.reduce((r, o) => {
    o.identifier
        .split('.')
        .map((_, i, a) => a.slice(0, i + 1).join('.'))
        .reduce((q, identifier, i, { length }) => {
            var temp = (q.children = q.children || []).find(p => p.identifier === identifier);
            if (!temp) {
                q.children.push(temp = { identifier });
            }
            if (i + 1 === length) {
                Object.assign(temp, o);
            }
            return temp;
        }, r);
    return r;
}, { children: tree });

console.log(tree);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Вы можете использовать Array.reduce() и _.setWith(), чтобы создать дерево объектов по пути (идентичности).Затем вы можете использовать рекурсивную функцию с _.transform() для преобразования children в массив, используя _.values():

const createTree = (arr) => {
  // reduce to a tree of objects
  const oTree = arr.reduce((r, o) => {
    const key = o.identifier.replace(/\./g, '.children.');

    // creates the path and adds the object value
    return _.setWith(r, key, o, Object)
  }, {});
  
  // transforms the children to an array recursivly
  const transformChildren = (tree) =>    
    _.transform(tree, (acc, v, k) => {
      const value = _.isObject(v) ? transformChildren(v) : v;

      acc[k] = _.eq(k, 'children') ? _.values(value) : value;
    });
    
  return transformChildren(_.values(oTree));
};

const data = [{"id":"mALRRY93jASr","identifier":"100","text":"Text A"},{"id":"7S3xHZEdNcfV","identifier":"200","text":"Text B"},{"id":"2ZA5xSJeukU6","identifier":"300","text":"Text C"},{"id":"bhg3GnLEvw2k","identifier":"300.100","text":"Text C - A"},{"id":"bhg3GnLEvw2k","identifier":"300.100.100","text":"Text C - A - A"},{"id":"2AcXNr4HT388","identifier":"300.200","text":"Text C - B"}];

const result = createTree(data);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Answer 3

Я использовал мой предыдущий ответ в качестве базы.Есть много сходств, но ваш синтаксис пути немного отличается, и мне пришлось настроить некоторые параметры.

const data = [
  {
    id: 'mALRRY93jASr',
    identifier: '100',
    text: 'Text A'
  },
  {
    id: '7S3xHZEdNcfV',
    identifier: '200',
    text: 'Text B'
  },
  {
    id: '2ZA5xSJeukU6',
    identifier: '300',
    text: 'Text C',
  },
  {
    id: 'bhg3GnLEvw2k',
    identifier: '300.100',
    text: 'Text C - A'
  },
  {
    id: 'bhg3GnLEvw2k',
    identifier: '300.100.100',
    text: 'Text C - A - A'
  },
  {
    id: '2AcXNr4HT388',
    identifier: '300.200',
    text: 'Text C - B'
  }
];

const pathPartRegex = /.*?\./g;
const tree = _.reduce(data, (result, value) => {
    // We use the . character as a "path part" terminator,
    // but it is not there at the end of the string, so we add it
    let identifier = value.identifier;
    if (!identifier.endsWith(".")) {
        identifier = identifier + ".";
    }
    const pathParts = identifier.match(pathPartRegex);
    let node = result;
    let path = "";

    // Go down through tree until last path part
    const notLastPart = pathParts.splice(0, pathParts.length - 1);
    for (const pathPart of notLastPart) {
        path += pathPart;
        const existingNode = node.children 
                                ? node.children.find(item => path.startsWith(item.identifier) )
                                : node.find(item => path.startsWith(item.identifier));
        if (existingNode) {
            node = existingNode
        } else {
            // If we need to traverse over a path that doesn't exist, just create it
            // See notes 
            const newNode = {
                identifier: path,
                children: []
            };

            // The root element is just an array, and doesn't have a children property
            if (node.children) {
                node.children.push(newNode);
            } else {
                node.push(newNode);
            }
            node = newNode;
        }
    }

    // Add new node
    const newNode = {
        id: value.id,
        text: value.text,
        identifier: value.identifier,
        children: []
    };

    // The root element is just an array, and doesn't have a children property
    if (node.children) {
        node.children.push(newNode);
    } else {
        node.push(newNode);
    }

    return result;
}, []);

---

Протестировано с помощью RunKit (https://npm.runkit.com/lodash)

---

Примечания:

Здесь применимы те же предупреждения из исходного ответа.