Author: John Au-Yeung

Sometimes, we want to merge duplicate objects in array of objects with JavaScript.

In this article, we’ll look at how to merge duplicate objects in array of objects with JavaScript.

How to merge duplicate objects in array of objects with JavaScript?

To merge duplicate objects in array of objects with JavaScript, we can use the array map method.

For instance, we write:

const data = [{
    label: "Book1",
    data: "US edition"
  },
  {
    label: "Book1",
    data: "UK edition"
  },
  {
    label: "Book2",
    data: "CAN edition"
  }
];
const newData = [...new Set(data.map(d => d.label))].map(label => {
  return {
    label,
    data: data.filter(d => d.label === label).map(d => d.data)
  }
})

console.log(newData)

to merge the items with the label value together.

To do this, we get an array of labels without the duplicates with [...new Set(data.map(d => d.label))].

Then we call map again with a callback to return an object with the data properties from the objects that has the same label values.

As a result, newData is:

[
  {
    "label": "Book1",
    "data": [
      "US edition",
      "UK edition"
    ]
  },
  {
    "label": "Book2",
    "data": [
      "CAN edition"
    ]
  }
]

Conclusion

To merge duplicate objects in array of objects with JavaScript, we can use the array map method

Sometimes, we want to reset an input control’s border color with JavaScript.

In this article, we’ll look at how to reset an input control’s border color with JavaScript.

How to reset an input control’s border color with JavaScript?

To reset an input control’s border color with JavaScript, we can use the removeProperty method.

For instance, we write:

<input style='border-color: red'>

to add an input with a red border.

Then we write:

setTimeout(() => {
  document.querySelector('input').style.removeProperty('border-color');
}, 2000)

to select the input with querySelector.

Then we remove the border-color CSS property from the styles with removeProperty.

We put it in the setTimeout callback to remove the border in 2 seconds.

Conclusion

To reset an input control’s border color with JavaScript, we can use the removeProperty method.

Sometimes, we want to detect when a user leaves a website with JavaScript.

In this article, we’ll look at how to detect when a user leaves a website with JavaScript.

How to detect when a user leaves a website with JavaScript?

To detect when a user leaves a website with JavaScript, we can add an event listener for the unload event.

For instance, we write:

window.onunload = () => {
  console.log('unload')
};

to set window.onunload to a function that runs when the page is being unloaded.

Therefore, when we leave the page, we’ll see 'unload' logged.

Conclusion

To detect when a user leaves a website with JavaScript, we can add an event listener for the unload event.

Sometimes, we want to create a mouseover effect with JavaScript addEventListener.

In this article, we’ll look at how to create a mouseover effect with JavaScript addEventListener.

How to create a mouseover effect with JavaScript addEventListener?

To create a mouseover effect with JavaScript addEventListener, we can pass in a callback to set the styles to create the mouseover effect.

For instance, we write:

<button>
  click me
</button>

to add a button.

Then we write:

const button = document.querySelector("button");

button.addEventListener("mouseover", () => {
  button.setAttribute("style", "background-color: blue;")
});
button.addEventListener("mouseout", () => {
  button.setAttribute("style", "background-color: red;")
});

to select the button with querySelector.

Then we call button.addEventListener to add the mouseover and mouseout event listeners.

The callback sets the background of the button to blue when we hover over the button and sets it to red when we move our mouse away from it.

Conclusion

To create a mouseover effect with JavaScript addEventListener, we can pass in a callback to set the styles to create the mouseover effect.