Get unique values from multiple array of objects in JS - the right way in javascript-CodePudding

I have these two array of objects and I want to get unique values from them! is anyone know how can I do that in JS?

let array1 = [
    { categoryName: "category 1" },
    { categoryName: "category 2" },
    { categoryName: "category 3" },
    { categoryName: "category 4" },
];

let array5 = [
    { categoryName: "category 1" },
    { categoryName: "category 2" },
    { categoryName: "category 3" },
    { categoryName: "category 4" },
    { categoryName: "category 5" },
];

let newArray = [];

for (const arr5Item of array5) {
  for (const arr1Item of array1) {
    if (arr5Item.categoryName !== arr1Item.categoryName) {
      newArray.push(arr5Item);
      break;
    } else {
      newArray.push(arr1Item);
      break;
    }
  }
}

console.log("newArray ", newArray);

CodePudding user response：

Array.reduce can solve your problem easily.

Step 1: Merge all of your array into one array, by three dots in javascript.

Step 2: Use Array.reduce to return your result.

let array1 = [
    { categoryName: "category 1" },
    { categoryName: "category 2" },
    { categoryName: "category 3" },
    { categoryName: "category 4" },
];

let array5 = [
    { categoryName: "category 1" },
    { categoryName: "category 2" },
    { categoryName: "category 3" },
    { categoryName: "category 4" },
    { categoryName: "category 5" },
];

const mergedArray = [...array1, ...array5];

const uniqueArray = mergedArray.reduce((acc, item) => {
   if (!acc.some(e => e.categoryName == item.categoryName)) {
      acc.push(item);
   }
   return acc;
}, []);
console.log(uniqueArray);

CodePudding user response：

You can easily achieve the result using Set. Using Set is efficient way

let array1 = [
  { categoryName: "category 1" },
  { categoryName: "category 2" },
  { categoryName: "category 3" },
  { categoryName: "category 4" },
];

let array5 = [
  { categoryName: "category 1" },
  { categoryName: "category 2" },
  { categoryName: "category 3" },
  { categoryName: "category 4" },
  { categoryName: "category 5" },
];

const set = new Set([
  ...array1.map((o) => o.categoryName),
  ...array5.map((o) => o.categoryName),
]);

const result = [...set.keys()].map((s) => ({ categoryName: s }));
console.log(result);

let array1 = [
  { categoryName: "category 1" },
  { categoryName: "category 2" },
  { categoryName: "category 3" },
  { categoryName: "category 4" },
];

let array5 = [
  { categoryName: "category 1" },
  { categoryName: "category 2" },
  { categoryName: "category 3" },
  { categoryName: "category 4" },
  { categoryName: "category 5" },
];

const set = new Set([
  ...array1.map((o) => o.categoryName),
  ...array5.map((o) => o.categoryName),
]);

const result = [];

for (let categoryName of set) result.push({ categoryName });
console.log(result);

CodePudding user response：

By using Set (for unique object) and JSON.stringify and JSON.parse. Assuming along with categoryName you may have other properties in the object.

let array1=[{categoryName:"category 1"},{categoryName:"category 2"},{categoryName:"category 3"},{categoryName:"category 4"},]

let array5=[{categoryName:"category 1"},{categoryName:"category 2"},{categoryName:"category 3"},{categoryName:"category 4"},{categoryName:"category 5"},];

const combineArr = [...array1.map(x=> JSON.stringify(x)), ...array5.map(x=> JSON.stringify(x))];

const result = [...new Set(combineArr)].map(x => JSON.parse(x));

console.log(result);

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

CodePudding user response：

Not just one. There are a lot of methods available for this. Basically you need a looping logic.

Please find the Array.reduce implementation.

Logic

Create a merged array, by using spread operator.
Check each node of merged array in accumulator.
If the node from the merged array, doesnot exist in accumulator, then its unique.

Working Fiddle

let array1 = [{ categoryName: "category 1" },{ categoryName: "category 2" },{ categoryName: "category 3" },{ categoryName: "category 4" }];
let array5 = [{ categoryName: "category 1" },{ categoryName: "category 2" },{ categoryName: "category 3" },{ categoryName: "category 4" },{ categoryName: "category 5" }];
const uniqueValues = [...array1, ...array5].reduce((acc, curr) => {
  const nodeExist = acc.some(item => item.categoryName === curr.categoryName);
  const secondArrayExist = array5.some(item => item.categoryName === curr.categoryName);
  if (!nodeExist) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueValues);

If you want to get the nodes which are present in only in any one of the array, use the below logic.

Logic

Create a merged array.
Check each node in the merged array, whether its present in array1 and array5. If the node is not present in any one of array1 or array5 then this is unique node.
Push that node to accumulator.

Working Fiddle

let array1 = [{ categoryName: "category 1" },{ categoryName: "category 2" },{ categoryName: "category 3" },{ categoryName: "category 4" }];
let array5 = [{ categoryName: "category 1" },{ categoryName: "category 2" },{ categoryName: "category 3" },{ categoryName: "category 4" },{ categoryName: "category 5" }];
const uniqueValues = [...array1, ...array5].reduce((acc, curr) => {
  const firstArrayExist = array1.some(item => item.categoryName === curr.categoryName);
  const secondArrayExist = array5.some(item => item.categoryName === curr.categoryName);
  if (!firstArrayExist || !secondArrayExist) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueValues);