Combine arrays using union or intersection to generate a new array

Question

Combine arrays using union or intersection to generate a new array

Seeking a solution in Angular 7 for a problem involving the creation of a function that operates on two arrays of objects. The goal is to generate a third array based on the first and second arrays.

The structure of the third array closely resembles the first array, with the key count within the children array being influenced by the presence or absence of corresponding children in the second array. Is there an angular array mapping function capable of handling this task?

First Array:

[
    {
        "name": "Category 1",
        "value": "Vegetables",
        "children": [
            {"name": "Carrots", "value": "Carrots", "count": 2},
            {"name": "Peas", "value": "Peas", "count": 1}
        ]
    },
    {
        "name": "Category 2",
        "value": "Fruits",
        "children": [
            {"name": "Apples", "value": "Apples", "count": 10},
            {"name": "Bananas", "value": "Bananas", "count": 5}
        ]
    },
    {
        "name": "Category 3",
        "value": "Desserts",
        "children": [
            {"name": "Ice Cream", "value": "IceCream", "count": 3},
            {"name": "Cakes", "value": "Cakes", "count": 3}
        ]
    }
]

Second Array

[
    {
        "name": "Category 1",
        "value": "Vegetables",
        "children": [
            {"name": "Peas", "value": "Peas", "count": 1}
        ]
    },
    {
        "name": "Category 2",
        "value": "Fruits",
        "children": [
            {"name": "Apples", "value": "Apples", "count": 3},
            {"name": "Bananas", "value": "Bananas", "count": 2}
        ]
    },
    {
        "name": "Category 3",
        "value": "Desserts",
        "children": []
    }
]

Third Array

[
    {
        "name": "Category 1",
        "value": "Vegetables",
        "children": [
            {"name": "Carrots", "value": "Carrots", "count": 0},
            {"name": "Peas", "value": "Peas", "count": 1}
        ]
    },
    {
        "name": "Category 2",
        "value": "Fruits",
        "children": [
            {"name": "Apples", "value": "Apples", "count": 3},
            {"name": "Bananas", "value": "Bananas", "count": 2}
        ]
    },
    {
        "name": "Category 3",
        "value": "Desserts",
        "children": [
            {"name": "Ice Cream", "value": "IceCream", "count": 0},
            {"name": "Cakes", "value": "Cakes", "count": 0}
        ]
    }
]

javascript arrays angular typescript object

Answer 1

Answer №1

If you want to achieve this task easily, you can use a combination of map and find, followed by reducing the array.

const firstArray = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}];
const secondArray = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}];
const result = firstArray.map(({ name, value, children }) => {
  let foundItem = secondArray.find(({ name: n, value: v }) => n == name && v == value);
  if (foundItem) children = children.concat(foundItem.children).reduce((acc, cur) => {
    let index = acc.findIndex(({ name: n }) => n == cur.name);
    if (index > -1) acc[index].count += cur.count;
    else acc.push(cur);
    return acc;
  }, []);
  return { name, value, children };
});
console.log(result);

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

Answer 2

If you want to achieve this task easily, you can use a combination of map and find, followed by reducing the array.

const firstArray = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}];
const secondArray = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}];
const result = firstArray.map(({ name, value, children }) => {
  let foundItem = secondArray.find(({ name: n, value: v }) => n == name && v == value);
  if (foundItem) children = children.concat(foundItem.children).reduce((acc, cur) => {
    let index = acc.findIndex(({ name: n }) => n == cur.name);
    if (index > -1) acc[index].count += cur.count;
    else acc.push(cur);
    return acc;
  }, []);
  return { name, value, children };
});
console.log(result);

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

Answer 3

Answer №2

Here's the idea:

Begin by converting the second array into an object to simplify finding values within it.
Next, iterate through array1 and extract the corresponding children from array2.
Loop through the children of array1 and update the values based on the children from array2.

const arr1 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}];
const arr2 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}];

let arr2Obj = Object.fromEntries(arr2.map(val => [val.name, val]))

const res = arr1.map(({ name, value, children }) => {
  let arr2Children = ( arr2Obj[name] || {} ).children
  let childrenObj = Object.fromEntries(arr2Children.map(val => [val.name,val]))
  let newChildren = children.map( val => {
    let count = (childrenObj[val.name] || {}).count || 0
    return {...val,count}
  })
  return {name,value,children:newChildren}
});
console.log(res);

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

P.S:- If your array1 and array2 are always in sorted manner than you need not to change it object and you can directly access using index, same for the children

const arr1 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}];
const arr2 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}];

let createObject = (arr) => arr.reduce((op,[key,value])=>{
  op[key] = value
  return op
},{})

let arr2Obj = createObject(arr2.map(val => [val.name, val]))

const res = arr1.map(({ name, value, children }) => {
  let arr2Children = ( arr2Obj[name] || {} ).children
  let childrenObj = createObject(arr2Children.map(val => [val.name,val]))
  let newChildren = children.map( val => {
    let count = (childrenObj[val.name] || {}).count || 0
    return {...val,count}
  })
  return {name,value,children:newChildren}
});
console.log(res);

Answer 4

Here's the idea:

Begin by converting the second array into an object to simplify finding values within it.
Next, iterate through array1 and extract the corresponding children from array2.
Loop through the children of array1 and update the values based on the children from array2.

const arr1 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}];
const arr2 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}];

let arr2Obj = Object.fromEntries(arr2.map(val => [val.name, val]))

const res = arr1.map(({ name, value, children }) => {
  let arr2Children = ( arr2Obj[name] || {} ).children
  let childrenObj = Object.fromEntries(arr2Children.map(val => [val.name,val]))
  let newChildren = children.map( val => {
    let count = (childrenObj[val.name] || {}).count || 0
    return {...val,count}
  })
  return {name,value,children:newChildren}
});
console.log(res);

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

P.S:- If your array1 and array2 are always in sorted manner than you need not to change it object and you can directly access using index, same for the children

const arr1 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Carrots","value":"Carrots","count":2},{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":10},{"name":"Bananas","value":"Bananas","count":5}]},{"name":"Category 3","value":"Desserts","children":[{"name":"Ice Cream","value":"IceCream","count":3},{"name":"Cakes","value":"Cakes","count":3}]}];
const arr2 = [{"name":"Category 1","value":"Vegetables","children":[{"name":"Peas","value":"Peas","count":1}]},{"name":"Category 2","value":"Fruits","children":[{"name":"Apples","value":"Apples","count":3},{"name":"Bananas","value":"Bananas","count":2}]},{"name":"Category 3","value":"Desserts","children":[]}];

let createObject = (arr) => arr.reduce((op,[key,value])=>{
  op[key] = value
  return op
},{})

let arr2Obj = createObject(arr2.map(val => [val.name, val]))

const res = arr1.map(({ name, value, children }) => {
  let arr2Children = ( arr2Obj[name] || {} ).children
  let childrenObj = createObject(arr2Children.map(val => [val.name,val]))
  let newChildren = children.map( val => {
    let count = (childrenObj[val.name] || {}).count || 0
    return {...val,count}
  })
  return {name,value,children:newChildren}
});
console.log(res);

Combine arrays using union or intersection to generate a new array

Answer №1

Answer №2

Similar questions

The method hasOwnProperty does not function as intended

Particles.js fails to persist as I scroll down the HTML page

The function item$.take cannot be found, resulting in a TypeError: "item$.take is not a function"

Finding results in AngularJS by typing at least 4 characters into the input field

What is the process for creating an Account SAS token for Azure Storage?

Using AngularJS with the Chosen Plugin to pre-select a value in a dropdown menu

Variations in output observed from angular function across various sections within DOM

Angular Tip: Display data in a dropdown using a select element

How to use jQuery to dynamically assign a class to an li element

What exactly is the purpose of the script type importmap?

Utilizing ng-disabled with a custom directive

What could be causing the rapid breakage of the socket in Ionic 3's Bluetooth Serial after just a short period

What is the best method for linking my chatbot's user interface to the API.AI server host using either the Python SDK or JavaScript

Guide on implementing Google sign in functionality in Angular 6 and redirecting on successful sign in

Angular 4: Implementing toggle switch functionality in Angular 4 by binding boolean values retrieved from the database

What is the best way to assign a unique ID to every <td> element within a table using React Js?

javascript The final position achieved through requestAnimationFrame is never precise

Nodejs functions properly on a local machine, however, it encounters issues when deployed on a VPS

Issue with Npm installation command on Windows 7 64-bit system

Exploring Angular 4.3's HTTP Interceptor Retry功能