為角度的動態數據生成嵌套結構

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

我需要在動態引導程序折疊中顯示此信息

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

我不需要在折疊組件中使用 idents，只是為了讓它更容易理解。

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

我放置的第一個字符串可以更改，因此可以包含更多項目並具有不同的順序，這就是我需要使其動態化的原因。

我想創建一個數組，例如用於顯示我的數據的組件一個示例。

同樣在最后一級，它必須顯示“附加數據”。

謝謝。

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