点分隔字符串数组中的树 [英] tree from array of dot-separated strings

问题描述

我有一个点分隔的字符串数组，看起来像下面的

I have an array of dot delimited strings which looks like the following

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 地图的，其中树层控件将被使用

and I want to build the following tree of of nested objects. In case it matters, this is for a leaflet map where the Tree Layers Control is going to be used

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'},
                            ]
                        },
                    ]

                }
            ]

        }
    ]
};

请问我该如何做这棵树?

How do I do this tree please?

推荐答案

您可以使用具有部分路径(或 label )作为键和引用的 mapper 对象作为树中对象的价值.分割在处的路径.并 reduce 以 tree 作为 initialValue 的数组.如果 path 尚不存在，请将其添加到mapper和tree中.在每次迭代中返回嵌套对象.

You could use a mapper object which has partial paths (or label) as key and a reference to the object in the tree as it's value. split the path at . and reduce the array with tree as the initialValue. If the path doesn't exist yet, add it to mapper and tree. Return the nested object in each iteration.

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)

这篇关于点分隔字符串数组中的树的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！