Ways to compare arrays and merge them into a single array with JavaScript

Question

Ways to compare arrays and merge them into a single array with JavaScript

Here are two arrays of objects:

Object 1:

    [  
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Screenprint Textile"
   }
]

Object 2: [
{
"sku":"30772", "qty":"1" }, {
"position":"Position Arm Left", "tech":"Embroidery" }, {
"position":"Position Chest", "tech":"Screenprint Textile" } ]

Object 2:

[  
   {  
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   }
]

I am looking to compare the object parameters, specifically position and tech, to obtain a final array with matching positions and objects as shown below

Final output:

[  

   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Embroidery"
   }
]

javascript arrays json object compare

Answer 1

Answer №1

When utilizing lodash, the intersectionWith method comes in handy for finding intersections based on two keys.

const object1 = [
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Chest",
    tech: "Embroidery"
  },
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Chest",
    tech: "Screenprint Textile"
  },
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Arm Left",
    tech: "Embroidery"
  },
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Arm Left",
    tech: "Screenprint Textile"
  }
];

const object2 = [
  {
    position: "Position Arm Left",
    tech: "Embroidery"
  },
  {
    position: "Position Chest",
    tech: "Screenprint Textile"
  };

const result = _.intersectionWith(
  object1,
  object2,
  (o1, o2) => o1.position === o2.position && o1.tech === o2.tech
);

console.log(result);

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad6d5dedbc9d2fa8e948b8d948b8f">[email protected]</a>/lodash.min.js"></script>

Answer 2

When utilizing lodash, the intersectionWith method comes in handy for finding intersections based on two keys.

const object1 = [
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Chest",
    tech: "Embroidery"
  },
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Chest",
    tech: "Screenprint Textile"
  },
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Arm Left",
    tech: "Embroidery"
  },
  {
    id: "30772",
    posimage: "/b/l/blue-shirt_1_1.jpg",
    position: "Position Arm Left",
    tech: "Screenprint Textile"
  }
];

const object2 = [
  {
    position: "Position Arm Left",
    tech: "Embroidery"
  },
  {
    position: "Position Chest",
    tech: "Screenprint Textile"
  };

const result = _.intersectionWith(
  object1,
  object2,
  (o1, o2) => o1.position === o2.position && o1.tech === o2.tech
);

console.log(result);

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad6d5dedbc9d2fa8e948b8d948b8f">[email protected]</a>/lodash.min.js"></script>

Answer 3

Answer №2

Give this a try:

The code is quite straightforward.

UPDATE: This new version of the code has been optimized for efficiency, calculating the length of both arrays and running the loop with fewer objects.

var obj1 =   [  
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Screenprint Textile"
   }
]

var obj2 = [  
   {  
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   }
]

const comparer = (arr1, arr2) => {
  
  let result = [];
  arr1.map((item) => {
    // let toPush = item.hasOwnPropery('id') ? item : second;
    arr2.map(second => {
      if(second.hasOwnProperty('position') &&
          second.hasOwnProperty('tech') &&
          second['position'] === item['position'] &&
          second['tech'] === item['tech']
        ) {
        result.push('id' in item ? item : second);
      }
    })
  })

  return result;
}

let length1 = obj1.length;
let length2 = obj2.length

if(length1 < length2) {
  console.log(comparer(obj2, obj1))
} else if (length2 < length1) {
  console.log(comparer(obj1, obj2))
}

// console.log(comparer(obj2, obj1))

Answer 4

Give this a try:

The code is quite straightforward.

UPDATE: This new version of the code has been optimized for efficiency, calculating the length of both arrays and running the loop with fewer objects.

var obj1 =   [  
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Screenprint Textile"
   }
]

var obj2 = [  
   {  
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   }
]

const comparer = (arr1, arr2) => {
  
  let result = [];
  arr1.map((item) => {
    // let toPush = item.hasOwnPropery('id') ? item : second;
    arr2.map(second => {
      if(second.hasOwnProperty('position') &&
          second.hasOwnProperty('tech') &&
          second['position'] === item['position'] &&
          second['tech'] === item['tech']
        ) {
        result.push('id' in item ? item : second);
      }
    })
  })

  return result;
}

let length1 = obj1.length;
let length2 = obj2.length

if(length1 < length2) {
  console.log(comparer(obj2, obj1))
} else if (length2 < length1) {
  console.log(comparer(obj1, obj2))
}

// console.log(comparer(obj2, obj1))

Answer 5

Answer №3

Give this a try, it may be just what you need to find the solution you're looking for.

const items = [  
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Screenprint Textile"
   }
];

const filters = [  
   {  
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   }
];

const matchedItems = items.filter(item => {
  const foundFilter = filters.find(filter => {
    return filter.tech === item.tech && filter.position === item.position;
  });
  return foundFilter;
});

console.log(matchedItems);

Answer 6

Give this a try, it may be just what you need to find the solution you're looking for.

const items = [  
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "id":"30772",
      "posimage":"/b/l/blue-shirt_1_1.jpg",
      "position":"Position Arm Left",
      "tech":"Screenprint Textile"
   }
];

const filters = [  
   {  
      "position":"Position Arm Left",
      "tech":"Embroidery"
   },
   {  
      "position":"Position Chest",
      "tech":"Screenprint Textile"
   }
];

const matchedItems = items.filter(item => {
  const foundFilter = filters.find(filter => {
    return filter.tech === item.tech && filter.position === item.position;
  });
  return foundFilter;
});

console.log(matchedItems);

Ways to compare arrays and merge them into a single array with JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Creating a Three by Three Grid with HTML and CSS

Determine browser compatibility by evaluating the DOM Level

Prevent automatic page reload when the button is clicked

The implementation of SetInterval within nested functions in JavaScript appears to be malfunctioning

Exploring the world of chained JavaScript Promises for automatic pagination of an API

merge two structures to create a unified entity

Is it possible to implement an automatic scrolling functionality in this code snippet?

Error in tabs.onUpdated argument in Firefox WebExtensions

Using Javascript to extract a custom attribute from a button element

Error TS2346: The parameters provided do not match the signature for the d3Service/d3-ng2-service TypeScript function

Can you explain NodeSource in simple terms, and what purpose does it serve?

Couchbaselite error: Invalid or nonexistent JSON data

My div is currently being concealed by a jQuery script that is hiding all of its

What is the process for enabling a Submit button and updating its value following a successful Ajax response within a Django environment?

NodeJS: Encountering an issue with retrieving the cart ID - receiving

Display a linear list organized in a tree format, showcasing instances where children have multiple parents

Retrieving radio button value in Angular 2

Different ways to use functions with AngularJS, including the parsley and reset options

"The rotation speed of the CameraHelper in three.js surpasses that of the Perspective

When a user selects an item from ion-item, a new page should open