How to combine two array of objects of different sizes, based on a property in Javascript?

问题

I have two arrays of objects that are different in length but share similar information.

qrySearchLocID = [{
    LocalLabID: '123f',
    SystemID: 5000152,
    AppLabID: 3
  },
  {
    LocalLabID: '12BC',
    SystemID: 5000384,
    AppLabID: 3
  },
];

and

qrySearch = [{
    sName: 'SomePlace1',
    lBusinessID: 37343,
    SystemID: 5000152
  },
  {
    sName: 'SomePlace2',
    lBusinessID: 39780,
    SystemID: 5000156
  },
  {
    sName: 'SomePlace3',
    lBusinessID: 50772,
    SystemID: 5000519
  },
  {
    sName: 'SomePlace4',
    lBusinessID: 31079,
    SystemID: 5000384
  },
]

I want to combine these two arrays based on the SystemID, copy all the information from qrySearch and add the LocalLabID from qrySearchLocID and nothing else. For example I want the result array to be

[{
    sName: 'SomePlace1',
    lBusinessID: 37343,
    SystemID: 5000152,
    LocalLabID: '123f'
  },
  {
    sName: 'SomePlace2',
    lBusinessID: 39780,
    SystemID: 5000156
  },
  {
    sName: 'SomePlace3',
    lBusinessID: 50772,
    SystemID: 5000519
  },
  {
    sName: 'SomePlace4',
    lBusinessID: 31079,
    SystemID: 5000384,
    LocalLabID: '12BC'
  },
]

Thanks in advance.

回答1:

You can use map and find functions.

var qrySearchLocID = [{
    LocalLabID: '123f',
    SystemID: 5000152,
    AppLabID: 3
  },
  {
    LocalLabID: '12BC',
    SystemID: 5000384,
    AppLabID: 3
  },
];

var qrySearch = [{
    sName: 'SomePlace1',
    lBusinessID: 37343,
    SystemID: 5000152
  },
  {
    sName: 'SomePlace2',
    lBusinessID: 39780,
    SystemID: 5000156
  },
  {
    sName: 'SomePlace3',
    lBusinessID: 50772,
    SystemID: 5000519
  },
  {
    sName: 'SomePlace4',
    lBusinessID: 31079,
    SystemID: 5000384
  },
];

var result = qrySearch.map((e, _) => 
          (_ = qrySearchLocID.find((q) => q.SystemID === e.SystemID)) ? 
          { ...e, ...{ LocalLabID: _.LocalLabID } } : e);

console.log(result);

Resources

• Array.prototype.map()
• Array.prototype.find()

回答2:

My recommendation is to convert both to an intermediate form that's an object literal keyed by SystemID. Then you can add all properties to that object, and later convert back to whatever form you need long-term.

回答3:

You can use the Array.findIndex function to find the index in an array that meets a certain criteria, then add the information to the object at that index:

qrySearchLocID = [{
    LocalLabID: '123f',
    SystemID: 5000152,
    AppLabID: 3
  },
  {
    LocalLabID: '12BC',
    SystemID: 5000384,
    AppLabID: 3
  },
];
qrySearch = [{
    sName: 'SomePlace1',
    lBusinessID: 37343,
    SystemID: 5000152
  },
  {
    sName: 'SomePlace2',
    lBusinessID: 39780,
    SystemID: 5000156
  },
  {
    sName: 'SomePlace3',
    lBusinessID: 50772,
    SystemID: 5000519
  },
  {
    sName: 'SomePlace4',
    lBusinessID: 31079,
    SystemID: 5000384
  },
]

for(var i = 0; i < qrySearch.length; i++){
  var j = qrySearchLocID.findIndex(function(elem){
    return elem.SystemID == qrySearch[i].SystemID;
  });
  if(j != -1){
    qrySearch[i].LocalLabID = qrySearchLocID[j].LocalLabID;
  }
}

console.log(qrySearch)

回答4:

To speed up the lookup, you could first convert the first array to a Map keyed by the SystemID. Then use that in a map on the second array, looking up the SystemID in the map and getting back the LocalLabID for it, if it exists.

Here you see all that happening in one functional expression:

const qrySearchLocID = [ { LocalLabID: '123f', SystemID: 5000152, AppLabID: 3 },{ LocalLabID: '12BC', SystemID: 5000384, AppLabID: 3 }],
    qrySearch = [{ sName: 'SomePlace1', lBusinessID: 37343, SystemID: 5000152},{ sName: 'SomePlace2', lBusinessID: 39780, SystemID: 5000156 },{ sName: 'SomePlace3', lBusinessID: 50772, SystemID: 5000519 },{ sName: 'SomePlace4', lBusinessID: 31079, SystemID: 5000384 }];
    
const result = qrySearch.map(
    (map => o => Object.assign(o, map.has(o.SystemID) 
                                  && { LocalLabID: map.get(o.SystemID) }))
        (new Map(qrySearchLocID.map(loc => [loc.SystemID, loc.LocalLabID])))
);

console.log(result);

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

来源：https://stackoverflow.com/questions/48571919/how-to-combine-two-array-of-objects-of-different-sizes-based-on-a-property-in-j