Combining two arrays in a sorted manner by their unique identifiers

Question

Combining two arrays in a sorted manner by their unique identifiers

Having two arrays of objects is quite common for me:

var parents = [
  { id: 77777, data: {}},
  { id: 88888, data: {}},
  { id: 99999, data: {}}
]


var children = [
  {
    belongTo: 77777,
    data: [
      { id: 111, data: {}},
      { id: 222, data: {}}
    ]},
  {
    belongTo: 99999,
    data: [
      { id: 333, data: {}}
    ]
  }
]

My ultimate goal is to combine parents and children into one comprehensive array:

var all = [
  { id: 77777, data: {}},
  { id: 111, data: {}},
  { id: 222, data: {}},
  { id: 88888, data: {}},
  { id: 99999, data: {}},
  { id: 333, data: {}}
]

In my quest to achieve this merge efficiently, I have experimented with various methods. Unfortunately, splitting or merging them together and then flattening the result always seemed overly complicated.

I wonder, what could be the simplest way to accomplish this merge?

Here's a method I've attempted (which proved ineffective):

children.map(function(child) {
  var parentIndex = parents.map(function(x) {return x.id}).indexOf(child.id)

  parents.splice(parentIndex + 1, 0, child.data)
})

[].concat.apply([], parents)

javascript arrays merge

Answer 1

Answer №1

If you're looking to achieve this, nested loops are the way to go: http://codepen.io/xyz123/1/

let parents = [
  { 
    id: 11111,
    data: {}
  },
  { 
    id: 22222,
    data: {}
  },
  { 
    id: 33333,
    data: {}
  }
]

let children = [
  {
    belongTo: 11111,
    data: [{
      id: 444,
      data: {}
    }]
  },
  {
    belongTo: 33333,
    data: [{
      id: 555,
      data: {}
    },
    {
      id: 666,
      data: {}
    }]
  }
]
let allData = [];
parents.forEach((parent) => {
    allData.push(parent);
    children.forEach((child) => {
        if (child.belongTo === parent.id) {
            child.data.forEach((element) => {
                allData.push(element);            
            });                
        }
    });
});
console.log(allData);

Answer 2

If you're looking to achieve this, nested loops are the way to go: http://codepen.io/xyz123/1/

let parents = [
  { 
    id: 11111,
    data: {}
  },
  { 
    id: 22222,
    data: {}
  },
  { 
    id: 33333,
    data: {}
  }
]

let children = [
  {
    belongTo: 11111,
    data: [{
      id: 444,
      data: {}
    }]
  },
  {
    belongTo: 33333,
    data: [{
      id: 555,
      data: {}
    },
    {
      id: 666,
      data: {}
    }]
  }
]
let allData = [];
parents.forEach((parent) => {
    allData.push(parent);
    children.forEach((child) => {
        if (child.belongTo === parent.id) {
            child.data.forEach((element) => {
                allData.push(element);            
            });                
        }
    });
});
console.log(allData);

Answer 3

Answer №2

Give this a try

var adults = [{
    id: 12345,
    info: {}
}, {
    id: 67890,
    info: {}
}, {
    id: 54321,
    info: {}
}];

var minors = [{
    belongsTo: 12345,
    info: [{
        id: 111,
        data: {}
    }, {
        id: 222,
        data: {}
    }]
}, {
    belongsTo: 54321,
    info: [{
        id: 333,
        data: {}
    }]
}];

function combine(adults, minors) {
  var adultLength = adults.length,
      minorLength = minors.length,
      output = [];
  
  for (var i = 0; i < adultLength; i++) { 
    output.push(adults[i]);
    
    for (var j = 0; j < minorLength; j++) {
      if (adults[i].id === minors[j].belongsTo) {
        output = output.concat(minors[j].info);
      }
    };
  }
  
  return output;
}

console.log(combine(adults, minors));

Adjustment for your specific requirements

var adults = [{
    id: 12345,
    info: {}
}, {
    id: 67890,
    info: {}
}, {
    id: 54321,
    info: {}
}];

var minors = [{
    belongsTo: 12345,
    info: [{
        id: 111,
        data: {}
    }, {
        id: 222,
        data: {}
    }]
}, {
    belongsTo: 54321,
    info: [{
        id: 333,
        data: {}
    }]
}];

minors.forEach(function(child) {
  var parentIndex = adults.map(function(x) {return x.id}).indexOf(child.id);
  adults.splice(parentIndex + 1, 0, child.info)
})

adults = [].concat.apply([], adults)

console.log(adults);

Answer 4

Give this a try

var adults = [{
    id: 12345,
    info: {}
}, {
    id: 67890,
    info: {}
}, {
    id: 54321,
    info: {}
}];

var minors = [{
    belongsTo: 12345,
    info: [{
        id: 111,
        data: {}
    }, {
        id: 222,
        data: {}
    }]
}, {
    belongsTo: 54321,
    info: [{
        id: 333,
        data: {}
    }]
}];

function combine(adults, minors) {
  var adultLength = adults.length,
      minorLength = minors.length,
      output = [];
  
  for (var i = 0; i < adultLength; i++) { 
    output.push(adults[i]);
    
    for (var j = 0; j < minorLength; j++) {
      if (adults[i].id === minors[j].belongsTo) {
        output = output.concat(minors[j].info);
      }
    };
  }
  
  return output;
}

console.log(combine(adults, minors));

Adjustment for your specific requirements

var adults = [{
    id: 12345,
    info: {}
}, {
    id: 67890,
    info: {}
}, {
    id: 54321,
    info: {}
}];

var minors = [{
    belongsTo: 12345,
    info: [{
        id: 111,
        data: {}
    }, {
        id: 222,
        data: {}
    }]
}, {
    belongsTo: 54321,
    info: [{
        id: 333,
        data: {}
    }]
}];

minors.forEach(function(child) {
  var parentIndex = adults.map(function(x) {return x.id}).indexOf(child.id);
  adults.splice(parentIndex + 1, 0, child.info)
})

adults = [].concat.apply([], adults)

console.log(adults);

Answer 5

Answer №3

By utilizing Higher Order Functions in conjunction with some ES6 features, we can achieve a more concise solution:

let merged = parents.map((parent) => {
  let data = children.filter((child) => child.belongTo == parent.id)
                    .reduce((acc, cur) => acc.concat(cur.data), [])
  return [parent].concat(data)
})

console.log([].concat(...merged))

Is there an opportunity for further refactoring?

Answer 6

By utilizing Higher Order Functions in conjunction with some ES6 features, we can achieve a more concise solution:

let merged = parents.map((parent) => {
  let data = children.filter((child) => child.belongTo == parent.id)
                    .reduce((acc, cur) => acc.concat(cur.data), [])
  return [parent].concat(data)
})

console.log([].concat(...merged))

Is there an opportunity for further refactoring?

Combining two arrays in a sorted manner by their unique identifiers

Answer №1

Answer №2

Answer №3

Similar questions

Update the information within a specific DIV element

Keeping the Drawer open in Material-UI: What you need to know!

What changes should I make to the panUp function in Three.js orbit controls?

Discover the positions of the y-axis tick marks with d3.js

Unable to proceed, WISTIA upload frozen at 100% complete

generate a customized synopsis for users without storing any data in the database

What is the reason why the "@wordpress/scripts" package does not produce the *.asset.php file when running "npm run build"?

Utilize the Feefo JSON data and convert it to a JavaScript array for rendering as an HTML

Utilizing React to connect with Metamask and share the signer across various contracts

What are the differences between Node's bcrypt and bcryptjs libraries?

The issue persists where Tailwind Inline color decorators are unable to function properly alongside CSS variables

The custom font fails to load on a customized Material UI theme

Creating a table with a static first column and vertical text positioned to the left of the fixed column

Error Encountered While Serializing Products in getServerSideProps in Next.js v14

How can you retrieve a C# variable within JavaScript while using Selenium?

Is there a way to set up an automatic pop-up for this?

What steps can be taken to ensure that an empty array is returned instead of a null value

Trigger a modal from one sibling Angular component to another

Issue with implementing setTimeout on await fetch() result

"Type Error: Attempting to assign a value to a const variable by declaring it as let while importing a variable from another file