title: Tricky array object manipulation of array of objects with javascript
body: <p>How can I take an array that looks like this ...</p>
  
  <pre><code>[
   {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",},
  ]
  
  </code></pre>
  
  <p>... and create a new array that looks like this ...</p>
  
  <pre><code>[
    {
      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",},
      ]
    },
  ]
  </code></pre>
  
  <p>Here is what I have tried:</p>
  
  <pre><code>  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 =&gt; node.node);
      let new_children = [];
      for( let i = 0; i &lt; nodes_in_children.length; i++) {
        let new_child = {
          "name": i,
          "color": children[i].color,
          "components": [],
        };
        for( let j = 0; j &lt; 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;
    }
  </code></pre>
  
  <p>Needless to say it doesn't work very well.</p>