Генерация вложенной структуры для динамических данных для угловых

Question

У меня возникла проблема при попытке создать динамическую структуру. У меня есть следующая строка.

"Client->Plant->Route->Turn"

У меня есть список устройств, которые имеют значение в каждом поле этой строки, и дополнительные данные, например,

[
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 1",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 1
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 2",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 2
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 3",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 3
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 2",
    "Route": "Route 1",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 4
  },
  {
    "Client": "Client 1",
    "Plant": "Plant 1",
    "Route": "Route 3",
    "Turn": "Turn 4",
    "ascends": 10,
    "descends": 5,
    "deviceId": 5
  },
  {
    "Client": "Client 2",
    "Plant": "Plant 1",
    "Route": "Route 1",
    "Turn": "Turn 1",
    "ascends": 10,
    "descends": 5,
    "deviceId": 6
  }
]

Мне нужно показать эту информацию в динамической начальной загрузке Colpase

Client 1            
    Plant 1     
        Route 1 
            Turn 1
        Route 2 
            Turn 1
        Route 3 
            Turn 1
            Turn 4
    Plant 2     
        Route 1 
            Turn 1
Client 2            
    Plant 1     
        Route 1 
            Turn 1

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

Я использую Angular 6, поэтому я искал компоненты и нашел один, который позволяет генерировать "n" вложенных списков. https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72

Вот пример того, как это должно выглядеть

[
  {
    "title": "Client 1",
    "children": [
      {
        "title": "Plant 1",
        "children": [
          {
            "title": "Route 1",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 1
              }
            ]
          },
          {
            "title": "Route 2",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 2
              }
            ]
          },
          {
            "title": "Route 3",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 3
              },
              {
                "title": "Turn 4",
                "ascends": 10,
                "descends": 5,
                "deviceId": 5
              }
            ]
          }
        ]
      },
      {
        "title": "Plant 2",
        "children": [
          {
            "title": "Route 1",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 4
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "title": "Client 2",
    "children": [
      {
        "title": "Plant 1",
        "children": [
          {
            "title": "Route 1",
            "children": [
              {
                "title": "Turn 1",
                "ascends": 10,
                "descends": 5,
                "deviceId": 6
              }
            ]
          }
        ]
      }
    ]
  }
]

Первая строка, которую я положил CAN CHANGE, поэтому может быть больше элементов и иметь другой порядок, поэтому мне нужно сделать его динамичным.

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

Также на последнем уровне должны отображаться «дополнительные данные».

Спасибо.

Answer 1

Вы можете взять массив для ключей для вложения элементов и уменьшить заданные данные, уменьшив ключи и создав объект-объект. Наконец, поместите данные в самый вложенный массив.

Этот подход использует свойства покоя для объектов.

var data = [{ Client: "Client 1", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 1 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 2", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 2 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 3 }, { Client: "Client 1", Plant: "Plant 2", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 4 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 4", ascends: 10, descends: 5, deviceId: 5 }, { Client: "Client 2", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 6 }],
    keys = ['Client', 'Plant', 'Route'],
    tree = data.reduce((r, { Turn, ascends, descends, deviceId, ...o }) => {
        keys
            .reduce((s, k) => {
                var temp = s.find(({ title }) => title === o[k]);
                if (!temp) {
                    s.push(temp = { title: o[k], children: [] });
                }
                return temp.children;
            }, r)
            .push({ title: Turn, ascends, descends, deviceId });
        return r;
    }, []);

console.log(tree);

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

Дифференцированный подход, который динамически принимает все свойства, используя массив ключей для вложения.

var data = [{ Client: "Client 1", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 1 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 2", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 2 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 3 }, { Client: "Client 1", Plant: "Plant 2", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 4 }, { Client: "Client 1", Plant: "Plant 1", Route: "Route 3", Turn: "Turn 4", ascends: 10, descends: 5, deviceId: 5 }, { Client: "Client 2", Plant: "Plant 1", Route: "Route 1", Turn: "Turn 1", ascends: 10, descends: 5, deviceId: 6 }],
    keys = ['Client', 'Plant', 'Route', 'Turn'],
    tree = [];


data.reduce((r, o) => {
    var p = keys.reduce((s, k) => {
        s.children = s.children || [];
        var temp = s.children.find(({ title }) => title === o[k]);
        if (!temp) {
            s.children.push(temp = { title: o[k] });
        }
        return temp;
    }, r);
    Object
        .keys(o)
        .filter(k => !keys.includes(k))
        .forEach(k => p[k] = o[k]);
    return r;
}, { children: tree });

console.log(tree);

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