Вложенная группа на основе строкового значения Angular 6

Question

Допустим, у меня есть строковый массив со значениями вроде -

animal
animal.mammal
animal.bird
animal.reptile
animal.mammal.human
animal.mammal.horse
animal.bird.crow
animal.reptile.snake

Когда мне нужно отобразить этот массив, я хочу отобразить его следующим образом -

-animal
  -animal.mammal
    -animal.mammal.human
    -animal.mammal.horse
  -animal.bird
    -animal.bird.crow
  -animal.reptile
    -animal.reptile.snake

Чтодолжен быть мой подход?Я должен использовать group by или filter или что?Я использую угловой 6 и материал UI.

Answer 1

У меня есть начало того, что вам нужно:

const groups = arr => {
    const res = [];
    arr.forEach(v => {
        let current = res
        const splits = v.split('.');
        splits.forEach(s => {
            if (current[s] === undefined) {
                current[s] = [];
            }
            current = current[s];
        });
        current.push(v);
    }
    return res;

 groups(yourArrayHere);

ввод:

const arr = ['animal', 'animal.mammal', 'animal.mammal.human'];

вывод:

[
   'animal': [
       0: 'animal',
       'animal.mammal': [
           0: 'animal.mammal.human'
       ]
   ]
]

Редактировать:

Вы также можете использовать оператор Reduction, который тоже неплохо работает :)

const groups = arr => {
    return arr.reduce((acc, v) => {
       let current = acc
        v.split('.').forEach(s => {
            if (current[s] === undefined) {
                current[s] = [];
            }
            current = current[s];
        });
        current.push(v);
        return acc;
    }, []);
};

groups(theArray);