Combining sub-objects under a shared parent in Javascript

Question

Combining sub-objects under a shared parent in Javascript

In my data structure, I have parent objects with nested arrays of children. Here's an example:

[
  {
    "fullName": "Certificate",
    "checked": false,
    "children": [
      {
        "type": "Certificate",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Certificate-1",
      }
    ]
  },
  {

    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package2",
      }
    ]
  },

  {
    "fullName": "Network",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Network1",
      }
    ]
  }
]

I want to combine parent nodes with the same 'fullName' and merge their children together. The desired result is:

[
  {
    "fullName": "Certificate",
    "checked": false,
    "children": [
      {
        "type": "Certificate",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Certificate-1",
      }
    ]
  },
  {

    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package1",
      },
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package2",
      }
    ]
  },

  {
    "fullName": "Network",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Network1",
      }
    ]
  }
]

I've tried various lodash solutions based on different resources, but haven't quite achieved the desired output. Do you have any suggestions or ideas?

@Andy, one solution that seemed promising was the following function:

function mergeNames (arr) {
    return _.chain(arr).groupBy('fullName').mapValues(function (v) {
        return _.chain(v).map('fullName').flattenDeep();
    }).value();
}

console.log(mergeNames(array));

However, this outputs a "lodash wrapper" and doesn't correctly combine the children. I suspect this might be because of having the same identifier (fullName) at both child and parent levels. Running this code provides the following console output:

{
  "Certificate": [
    "Certificate"
  ],
  "InstalledPackage": [
    "InstalledPackage",
    "InstalledPackage"
  ],
  "Network": [
    "Network"
  ]
}

javascript arrays object merge lodash

Answer 1

Answer №1

To achieve this task, utilize the Array.prototype methods in the following way:

let information = [
  {
    "fullName": "Certificate",
    "checked": false,
    "children": [
      {
        "type": "Certificate",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Certificate-1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package2",
      }
    ]
  },
  {
    "fullName": "Network",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Network1",
      }
    ]
  }
];

let result = information.reduce((res, elem) => {
let arrForChecking = res.filter((el) => el.fullName === elem.fullName);

if (arrForChecking.length) {
arrForChecking[0].children.push(elem.children[0]);

return res;
}

return res = res.concat(elem);
}, []);

console.log(result);

Answer 2

To achieve this task, utilize the Array.prototype methods in the following way:

let information = [
  {
    "fullName": "Certificate",
    "checked": false,
    "children": [
      {
        "type": "Certificate",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Certificate-1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package2",
      }
    ]
  },
  {
    "fullName": "Network",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Network1",
      }
    ]
  }
];

let result = information.reduce((res, elem) => {
let arrForChecking = res.filter((el) => el.fullName === elem.fullName);

if (arrForChecking.length) {
arrForChecking[0].children.push(elem.children[0]);

return res;
}

return res = res.concat(elem);
}, []);

console.log(result);

Answer 3

Answer №2

To efficiently group and combine data, you can establish key definitions for grouping while utilizing a hash table to store groups and then populate the result array with individual groups.

var data = [{ fullName: "Certificate", checked: false, children: [{ type: "Certificate", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Certificate-1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package2" }] }, { fullName: "Network", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Network1" }] }], 
    hashTable = Object.create(null), 
    keys = ['fullName', 'checked'], 
    groupedData = [];

data.forEach(function (obj) {
    var key = keys.map(function (k) { return obj[k]; }).join('|');
    if (!hashTable[key]) {
        hashTable[key] = {};
        keys.forEach(function (k) { hashTable[key][k] = obj[k]; });
        hashTable[key].children = [];
        groupedData.push(hashTable[key]);
    }
    hashTable[key].children = hashTable[key].children.concat(obj.children);
});

console.log(groupedData);

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

Using ES6 syntax:

var data = [{ fullName: "Certificate", checked: false, children: [{ type: "Certificate", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Certificate-1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package2" }] }, { fullName: "Network", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Network1" }] }],
    hashTable = Object.create(null),
    keys = ['fullName', 'checked'],
    groupedData = [];

data.forEach(function (obj) {
    var key = keys.map(k => obj[k]).join('|');
    if (!hashTable[key]) {
        hashTable[key] = Object.assign({}, obj);
        groupedData.push(hashTable[key]);
        return;
    }
    hashTable[key].children.push(...obj.children);
});

console.log(groupedData);

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

Answer 4

To efficiently group and combine data, you can establish key definitions for grouping while utilizing a hash table to store groups and then populate the result array with individual groups.

var data = [{ fullName: "Certificate", checked: false, children: [{ type: "Certificate", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Certificate-1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package2" }] }, { fullName: "Network", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Network1" }] }], 
    hashTable = Object.create(null), 
    keys = ['fullName', 'checked'], 
    groupedData = [];

data.forEach(function (obj) {
    var key = keys.map(function (k) { return obj[k]; }).join('|');
    if (!hashTable[key]) {
        hashTable[key] = {};
        keys.forEach(function (k) { hashTable[key][k] = obj[k]; });
        hashTable[key].children = [];
        groupedData.push(hashTable[key]);
    }
    hashTable[key].children = hashTable[key].children.concat(obj.children);
});

console.log(groupedData);

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

Using ES6 syntax:

var data = [{ fullName: "Certificate", checked: false, children: [{ type: "Certificate", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Certificate-1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package1" }] }, { fullName: "InstalledPackage", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Package2" }] }, { fullName: "Network", checked: false, children: [{ type: "InstalledPackage", lastModifiedDate: "1971-01-01T00:00:00.000Z", fullName: "Network1" }] }],
    hashTable = Object.create(null),
    keys = ['fullName', 'checked'],
    groupedData = [];

data.forEach(function (obj) {
    var key = keys.map(k => obj[k]).join('|');
    if (!hashTable[key]) {
        hashTable[key] = Object.assign({}, obj);
        groupedData.push(hashTable[key]);
        return;
    }
    hashTable[key].children.push(...obj.children);
});

console.log(groupedData);

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

Answer 5

Answer №3

here is the code snippet:

data = [
  {
    "fullName": "Certificate",
    "checked": false,
    "children": [
      {
        "type": "Certificate",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Certificate-1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package2",
      }
    ]
  },
  {
    "fullName": "Network",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Network1",
      }
    ]
  }
]

final_data = []
i=-1
data.forEach(function(item, index){
  if(index>0){
    i=i+1
    if(data[index]['fullName'] === data[i]['fullName']) {
      item['children'] = item['children'].concat(data[i]['children'])
      final_data[final_data.length - 1] = item
    } else {
      final_data.push(item)
    }
  } else {
    final_data.push(item)
  }
})

Answer 6

here is the code snippet:

data = [
  {
    "fullName": "Certificate",
    "checked": false,
    "children": [
      {
        "type": "Certificate",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Certificate-1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package1",
      }
    ]
  },
  {
    "fullName": "InstalledPackage",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Package2",
      }
    ]
  },
  {
    "fullName": "Network",
    "checked": false,
    "children": [
      {
        "type": "InstalledPackage",
        "lastModifiedDate": "1971-01-01T00:00:00.000Z",
        "fullName": "Network1",
      }
    ]
  }
]

final_data = []
i=-1
data.forEach(function(item, index){
  if(index>0){
    i=i+1
    if(data[index]['fullName'] === data[i]['fullName']) {
      item['children'] = item['children'].concat(data[i]['children'])
      final_data[final_data.length - 1] = item
    } else {
      final_data.push(item)
    }
  } else {
    final_data.push(item)
  }
})

Combining sub-objects under a shared parent in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Converting a bytearray into a Jar file: A step-by-step guide

I am experiencing an issue where the button I place inside a material-ui table is unresponsive to clicks

Ways to retrieve a specific object property from an array of objects within a click event listener?

Having trouble removing a row from Mysql database using Node.js

Is the dragging behavior of a rotated image different than that of the original image when using CSS rotation?

Check to see if two words are identical in PHP

Updating the HTTP request header in AngularJS without requiring a page refresh

The concept of looping within Angular directives

Tips for utilizing ajax function to refresh database entries

Accessing a modal in Bootstrap 4 by clicking on an anchor link will automatically open the

Effortless bug tracking in Chrome developer tools

Discover and modify the values of all the keys within nested JSON arrays and objects using JavaScript

How to simulate a particular class from a node package using Jest mocks

What is the best way to pass the values of two interlinked drop-down menus through an AJAX post request to a Django view?

Utilizing jquery.validate.min.js for efficient form validation

What is the method for transforming latitude and longitude coordinates into a physical address for a website?

Issue encountered while trying to gather vertex coordinates from a file using Blender's from_pydata function

How come using a query object as a parameter for .limit() returns an empty array?

Information submitted through an ajax request does not get saved in the $_POST array

Encrypting data using pidCrypt in a combination of Javascript and PHP