Question

如何获取一个看起来像这样的数组...

[
 {name: "vif087-08", color: "red", category: "compute", node: "esxi", filter_key: "vif087-08",},
 {name: "Hard disk 1", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 1",},
 {name: "Hard disk 2", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 2",},
 {name: "Hard disk 3", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 3",},
 {name: "Hard disk 4", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 4",},
 {name: "Hard disk 5", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 5",},
 {name: "Hard disk 6", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 6",},
]

...并创建一个看起来像这样的新数组...

[
  {
    name: "esxi",
    color: "red",
    components: [
      {name: "vif087-08", category: "compute", node: "esxi", filter_key: "vif087-08",}
    ]
  },
  {
    name: "hdd_nas",
    color: "blue",
    components: [
      {name: "Hard disk 1", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 1",},
      {name: "Hard disk 2", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 2",},
      {name: "Hard disk 3", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 3",},
      {name: "Hard disk 4", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 4",},
      {name: "Hard disk 5", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 5",},
      {name: "Hard disk 6", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 6",},
    ]
  },
]

这是我尝试过的：

  buildNewChildren(children:any) {
    // this routine will build left and right children of the center node.
    // the children will be rect for each "node" (e.g. esxi, vm, nas etc.)
    // inside the rect there will be a scrolling list of all the names of the
    // components that are of that type of node.
    let nodes_in_children = children.map(node => node.node);
    let new_children = [];
    for( let i = 0; i < nodes_in_children.length; i++) {
      let new_child = {
        "name": i,
        "color": children[i].color,
        "components": [],
      };
      for( let j = 0; j < children.length; j++){
        if( children[j].node === i) {
          let new_component = {
            "name" : children[j].name,
            "category": children[j].category,
            "node": children[j].node,
            "filter_key": children[j].filter_key,
            "parent": children[j].parent
          };
          new_child.components.push(new_component);
        }
      }
      new_children.push(new_child);''
    }
    return new_children;
  }

不用说它不能很好地工作。

Answer 1

这是一个小的脚本，可以进行转换：

const input = [
 {name: "vif087-08", color: "red", category: "compute", node: "esxi", filter_key: "vif087-08",},
 {name: "Hard disk 1", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 1",},
 {name: "Hard disk 2", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 2",},
 {name: "Hard disk 3", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 3",},
 {name: "Hard disk 4", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 4",},
 {name: "Hard disk 5", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 5",},
 {name: "Hard disk 6", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 6",},
]

const resultObj = {};

for(const element of input) {
  if(!(element.node in resultObj)){
    resultObj[element.node] = {};
  }
  if(!(element.color in resultObj[element.node])) {
    resultObj[element.node][element.color] = [];
  }
  resultObj[element.node][element.color].push(element);
}

const output = [];

for(const name in resultObj) {
  for(const color in resultObj[name]){
    output.push({
      name,
      color,
      components: resultObj[name][color]
    });
  }
}

console.log(output)

Answer 2

您可以简化为使用节点和颜色值组合为键的对象，然后使用Object.values()获取结果数组

const groupedObj =  data.reduce((a, {node, color, ...rest}) => {
       const key = `${node}|${color}`;
       a[key] = a[key] || {name:node, color, components:[]};
       a[key].components.push({node, ...rest});
       return a;
   },{});

const res = Object.values(groupedObj);

console.log(res)

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

<script>
  const data = [
 {name: "vif087-08", color: "red", category: "compute", node: "esxi", filter_key: "vif087-08",},
 {name: "Hard disk 1", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 1",},
 {name: "Hard disk 2", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 2",},
 {name: "Hard disk 3", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 3",},
 {name: "Hard disk 4", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 4",},
 {name: "Hard disk 5", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 5",},
 {name: "Hard disk 6", color: "blue", category: "nfs", node: "hdd_nas", filter_key: "dev-03:Hard disk 6",},
]
</script>

用JavaScript处理对象数组的棘手数组对象

2 个答案: