Массив строк с именами путей к дереву

1

У меня есть входные данные, такие как:

['Level 1/Level 2/Level 3/ Level4a',
'Level 1/Level 2/Level 3/ Level4b',
'Level 1/Level 2/Level 3/ Level4c',
'Level 1/Level 2/Level 3/ Level4a',
'Level 1c/Level 2d/Level 3b/ Level4d',
'Level 1c/Level 2d/Level 3b/ Level4e',
'Level 1c/Level 2d/Level 3b/ Level4f']

Теперь я хотел бы преобразовать его в массив treeview следующим образом:

tree: [
                {
                    name: 'Level 1',
                    children: [
                        {
                            name: 'Level 2',
                            children: [
                                {
                                    name: 'Level 3',
                                    children: [
                                        {name: 'Level 4a'},
                                        {name: 'Level 4b'},
                                        {name: 'Level 4c'}
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'Level 1c',
                    children: [
                        {
                            name: 'Level 2d',
                            children: [
                                {
                                    name: 'Level 3b',
                                    children: [
                                        {name: 'Level 4d'},
                                        {name: 'Level 4e'},
                                        {name: 'Level 4f'}
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]

Есть способ итерации, но, насколько мне кажется, это сложно. Каков наилучший оптимальный способ сделать это?

  • 0
    пожалуйста, добавьте то, что вы пробовали. данные отсортированы?
  • 0
    Кстати, данные не соответствуют желаемому результату.
Показать ещё 1 комментарий
Теги:
treeview

2 ответа

2
Лучший ответ

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

var data = ['Level 1/Level 2/Level 3/Level4a', 'Level 1/Level 2/Level 3/Level4b', 'Level 1/Level 2/Level 3/Level4c', 'Level 1/Level 2/Level 3/Level4a', 'Level 1c/Level 2d/Level 3b/Level4d', 'Level 1c/Level 2d/Level 3b/Level4e', 'Level 1c/Level 2d/Level 3b/Level4f'],
    tree = [],
    levels = [{ children: tree }];

data.forEach(s => s.split('/').forEach((name, i) => {
    if (!levels[i + 1] || levels[i + 1].name !== name) {
        levels[i].children = levels[i].children || [];
        levels[i].children.push(levels[i + 1] = { name });
    }
}));

console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
  • 0
    Это не будет хорошо работать, если массив данных будет смешанным, и, например, последний элемент данных снова начнет с «Уровня 1».
  • 0
    @LazioTibijczyk, данные отсортированы, как заявили оп.
Показать ещё 1 комментарий
1

Вы можете использовать 2 reduce s. Первый - это цикл через массив. Второе reduce - это цикл через строку split(). Использовать find() для проверки наличия элемента в массиве

var arr = ['Level 1/Level 2/Level 3/ Level4a', 'Level 1/Level 2/Level 3/ Level4b', 'Level 1/Level 2/Level 3/ Level4c', 'Level 1/Level 2/Level 3/ Level4a', 'Level 1c/Level 2/Level 3/ Level4d', 'Level 1c/Level 2/Level 3/ Level4e', 'Level 1c/Level 2/Level 3/ Level4f'];

var result = arr.reduce((c, v) => {
  v.split('/').reduce((a, o, i) => {
    if (i === 0) var p = a;
    else var p = a.children = a.children || [];

    let f = p.find(x => x.name === o.trim());
    if (!f) {
      f = {name: o.trim()};
      p.push(f);
    }

    return f;
  }, c);

  return c;
}, []);


console.log(result);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню