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

我需要在动态bootstrap collpase中显示此信息

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

我不需要在折叠组件中使用标识，只是为了使其更易于理解。

我使用的是角度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
              }
            ]
          }
        ]
      }
    ]
  }
]

我可以更改的第一个字符串可以更改，因此可以有更多项目且顺序不同，这就是为什么我需要使其动态化。

我想创建一个类似于组件的数组示例来显示我的数据。

还必须在最后一级显示“其他数据”。

谢谢。

Answer 1

您可以为用于嵌套项目的键获取数组，并通过减少键和创建Neede对象来减少给定数据。最后将数据推送到最嵌套的数组。

此方法对对象使用rest属性。

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; }

为角度的动态数据生成嵌套结构

1 个答案: