JavaScript (рекурсия) Как из одного массива (каталог) сделать другой (дерево)?

Question

[Максим Рысаков]

Как сделать с 1 уровнем понятно, а как сделать рекурсию, чтоб неограниченные вложения были не понимаю
f= это уровень вложенности получается, справа налево

name=Tel3,f=Galaxy,f=Samsung,g=tovarov,g=catalog
name=Tel2,f=Samsung,g=tovarov,g=catalog

Samsung -> Galaxy -> Tel3
Samsung -> Tel2

На входе

[
  {
    "path": "name=Tel6,g=tovarov,g=catalog",
    "id": "6000",
    "name": "Tel6"
  },
  {
    "path": "name=Tel1,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "1000",
    "name": "Tel1"
  },
  {
    "path": "name=Tel2,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "2000",
    "name": "Tel2"
  },
  {
    "path": "name=Tel3,f=Galaxy,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "3000",
    "name": "Tel3"
  },
  {
    "path": "name=Tel4,f=A,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "4000",
    "name": "Tel4"
  },
  {
    "path": "name=Tel5,f=A,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "5000",
    "name": "Tel5"
  }
  // ...
]

а на выходе хочу получить, для компонента построение дерева

[
  {
    "label": "Tel6",
    "id": "6000"
  },
  {
    "label": "Samsung",
    "id": "f=Samsung,g=tovarov,g=catalog", // Или может что угодно уникальное, если он имеет "children"
    "children": [
      {
        "label": "Tel1",
        "id": "1000" // Важное
      },
      {
        "label": "Tel2",
        "id": "2000" // Важное
      },
      {
        "label": "Galaxy",
        "id": "f=Galaxy,f=Samsung,g=tovarov,g=catalog", // Или может что угодно уникальное, если он имеет "children"
        "children": [
          {
            "label": "Tel3",
            "id": "3000" // Важное
          }
        ]
      },
      {
        "label": "A",
        "id": "f=A,f=Samsung,g=tovarov,g=catalog", // Или может что угодно уникальное, если он имеет "children"
        "children": [
          {
            "label": "Tel4",
            "id": "4000" // Важное
          },
          {
            "label": "Tel5",
            "id": "5000" // Важное
          }
        ]
      }
    ]
  },
  // ...
]

Answer 1

[Алексей]

Прогоняешь циклом первый массив и заполняешь другой по условиям которые тебе нужны. Да и во втором массиве я массива то не вижу, там же 1 элемент, поэтому проще его опустить

var sourceArr = [...];
var obj = {};
sourceArr.forEach(x => {
  if(x[prop]) // парсиш ипроводиш нужные операции с объектом
  // тотже x.path просто сплитиш по запятой и делаешь внутренний цикл с проверкой obj.hasOwnProperty
  obj[prop] = x[prop] 
})

Comments

[Максим Рысаков]

Не, это массив на выходе (дерево), я просто обрезал для примера под одну фирму (Samsung), а там и другие.

[Максим Рысаков]

Как сделать с 1 уровнем понятно, а как сделать рекурсию, чтоб неограниченные вложения были не понимаю
f= это уровень вложенности получается

[Алексей]

Ну тут тогда только угадывать, потому что логику построения я не вижу, возможно она канеш и есть, но чет сомневаюсь.

Answer 2

[Дмитрий Беляев]

function parsePath(path) {
  return path.split(',').reduce((acc, item) => {
    const [key, value] = item.split('=');
    switch(key) {
    case 'name':
      acc.name = value;
      break;
    case 'f':
    case 'g':
      acc[key].push(value);
      break;
    }
    return acc;
  }, {
    name: '',
    f: [],
    g: []
  });
}

function normalizeTree(tree) {
  return Object.keys(tree).map(label => {
    const item = tree[label];
    if(item.id) { return item; }
    const children = normalizeTree(item);
    const id = `[${children.map(({id}) => id).join(',')}]`;
    return {id, label, children};
  });
}

function reduceToTree(data) {
  return normalizeTree(data.reduce((acc, {path, id}) => {
    const {name, f, g} = parsePath(path);
    const target = f.reverse().concat(name).reduce((target, label) => {
      return target[label] || (target[label] = {});
    }, acc);
    target.id = id;
    target.label = name;
    target.g = g;
    return acc;
  }, {}));
}

console.log(reduceToTree([
  {
    "path": "name=Tel6,g=tovarov,g=catalog",
    "id": "6000",
    "name": "Tel6"
  },
  {
    "path": "name=Tel1,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "1000",
    "name": "Tel1"
  },
  {
    "path": "name=Tel2,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "2000",
    "name": "Tel2"
  },
  {
    "path": "name=Tel3,f=Galaxy,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "3000",
    "name": "Tel3"
  },
  {
    "path": "name=Tel4,f=A,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "4000",
    "name": "Tel4"
  },
  {
    "path": "name=Tel5,f=A,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "5000",
    "name": "Tel5"
  }
  // ...
]));

Comments

[Максим Рысаков]

СПАСИБО ЗА ОТВЕТ!
ВСЕ ОТЛИЧНО!

Но нашел багу :( , когда совпадает название модели и название фирмы, группировка не работает в этот момент.

console.log(JSON.stringify(reduceToTree([
  {
    "path": "name=Tel6,g=tovarov,g=catalog",
    "id": "6000",
    "name": "Tel6"
  },
  {
    "path": "name=Tel1,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "1000",
    "name": "Tel1"
  },

  // ...
  {
    "path": "name=<b>Galaxy</b>,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "2001",
    "name": "Galaxy"
  },

  // ТУТ РУШИТЬСЯ ГРУППИРОВКА
  {
    "path": "name=a1,f=<b>Galaxy</b>,g=tovarov,g=catalog", // f= неограниченная вложенность

    "id": "345345",
    "name": "a1"
  },
  {
    "path": "name=a2,f=<b>Galaxy</b>,g=tovarov,g=catalog", // f= неограниченная вложенность

    "id": "567756756",
    "name": "a2"
  },
  // ...

  {
    "path": "name=Tel_8,f=Tel_2,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "2002",
    "name": "Tel_8"
  },
  {
    "path": "name=Tel_88,f=Tel_2,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "2007",
    "name": "Tel_88"
  },
  {
    "path": "name=Tel3,f=Galaxy,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "3000",
    "name": "Tel3"
  },
  {
    "path": "name=Tel4,f=A,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "4000",
    "name": "Tel4"
  },
  {
    "path": "name=Tel5,f=A,f=Samsung,g=tovarov,g=catalog", // f= неограниченная вложенность
    "id": "5000",
    "name": "Tel5"
  }
  // ...
])));

a1 и a2 не сгруппировадись в отдельную группу Galaxy