дерево из массива строк, разделенных точками

Question

У меня есть массив строк, разделенных точками, который выглядит следующим образом

data = [
    'Europe.UK.London.TrafalgarSq', 
    'Europe.UK.London.HydePark', 
    'Europe.UK.London.OxfordStreet', 
    'Europe.UK.London.City.Bank', 
    'Europe.France.Paris', 
    'Europe.France.Bordeaux'},
]

, и я хочу построить следующее дерево вложенных объектов. В случае необходимости, это для карты leaflet, где будет использоваться Tree Layers Control

var tree = {
    label: 'Places',
    selectAllCheckbox: 'Un/select all',
    children: [
        {
            label: 'Europe',
            selectAllCheckbox: true,
            children: [
                {
                    label: 'Europe.UK',
                    selectAllCheckbox: true,
                    children: [
                        {
                            label: 'Europe.UK.London',
                            selectAllCheckbox: true,
                            children: [
                                {label: 'Europe.UK.London.TrafalgarSq'},
                                {label: 'Europe.UK.London.HydePark'},
                                {label: 'Europe.UK.London.OxfordStreet'},
                                {
                                    label: 'Europe.UK.London.City',
                                    selectAllCheckbox: true,
                                    children: [
                                        {label: 'Europe.UK.London.City.Bank'},
                                    ]
                                },
                            ]
                        },
                        {
                            label: 'Europe.France',
                            selectAllCheckbox: true,
                            children: [
                                {label: 'Europe.France.Paris'},
                                {label: 'Europe.France.Bordeaux'},
                            ]
                        },
                    ]

                }
            ]

        }
    ]
};

Как мне сделать это дерево, пожалуйста?

Answer 1

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

var data = ['Europe.UK.London.TrafalgarSq', 'Europe.UK.London.HydePark', 'Europe.UK.London.OxfordStreet', 'Europe.UK.London.City.Bank', 'Europe.France.Paris', 'Europe.France.Bordeaux'],
    children = data.reduce((r, s) => {
        s.split('.').reduce((q, _, i, a) => {
            q.selectAllCheckbox = true;
            var label = a.slice(0, i + 1).join('.'),
                temp = (q.children = q.children || []).find(o => o.label === label);
            if (!temp) q.children.push(temp = { label });
            return temp;
        }, r);
        return r;
    }, { children: [] }).children,
    tree = { label: 'Places', selectAllCheckbox: 'Un/select all', children };

console.log(tree);

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

Answer 2

Вы можете использовать объект mapper, который имеет частичные пути (или label) в качестве ключа и ссылку на объект в дереве в качестве его значения. split путь в . и reduce массив с tree как initialValue. Если path еще не существует, добавьте его в картограф и дерево. Возвращать вложенный объект на каждой итерации.

const data = ["Europe.UK.London.TrafalgarSq","Europe.UK.London.HydePark","Europe.UK.London.OxfordStreet","Europe.UK.London.City.Bank","Europe.France.Paris","Europe.France.Bordeaux"],
    mapper = {},
    tree = {
      label: 'Places',
      selectAllCheckbox: 'Un/select all',
      children: []
    }

for (const str of data) {
  let splits = str.split('.'),
      label = '';

  splits.reduce((parent, place) => {
    if (label)
      label += `.${place}`
    else
      label = place

    if (!mapper[label]) {
      const o = { label };
      mapper[label] = o;
      parent.selectAllCheckbox = true
      parent.children = parent.children || [];
      parent.children.push(o)
    }

    return mapper[label];
  }, tree)
}

console.log(tree)