Author: John Au-Yeung

Sometimes, we want to merge JavaScript objects in array with same key.

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

How to merge JavaScript objects in array with same key?

To merge JavaScript objects in array with same key, we use some array methods.

For instance, we write

const array = [
  { name: "foo1", value: "val1" },
  { name: "foo1", value: ["val2", "val3"] },
  { name: "foo2", value: "val4" },
];

const result = array.reduce((acc, { name, value }) => {
  acc[name] ??= { name, value: [] };
  if (Array.isArray(value)) {
    acc[name].value = acc[name].value.concat(value);
  } else {
    acc[name].value.push(value);
  }
  return acc;
}, {});

console.log(Object.values(result));

to call array.reduce with a callback that gets the values from objects in array and put them in as the property of the acc object.

In it, we assign { name, value: [] } to acc[name] if acc[name] is undefined.

Then if value is an array, we call concat to put value in the acc[name].value array.

Otherwise, we call push to add value into acc[name].value.

acc is returned at the end.

Conclusion

To merge JavaScript objects in array with same key, we use some array methods.

Sometimes, we want to reconnect to WebSocket after close connection with JavaScript.

In this article, we’ll look at how to reconnect to WebSocket after close connection with JavaScript.

How to reconnect to WebSocket after close connection with JavaScript?

To reconnect to WebSocket after close connection with JavaScript, we create a new WebSocket object when the connection is closed.

For instance, we write

const startWebsocket = () => {
  let ws = new WebSocket("ws://localhost:8080");

  ws.onmessage = (e) => {
    console.log("websocket message event:", e);
  };

  ws.onclose = () => {
    ws = null;
    setTimeout(startWebsocket, 5000);
  };
};

startWebsocket();

to define the startWebsocket function.

In it, we create a new WebSocket object to start the connection.

Then we set its onclose property to a function that calls startWebsocket to restart the connection.

Conclusion

To reconnect to WebSocket after close connection with JavaScript, we create a new WebSocket object when the connection is closed.

Sometimes, we want to manually reload Google Map with JavaScript.

In this article, we’ll look at how to manually reload Google Map with JavaScript.

How to manually reload Google Map with JavaScript?

To manually reload Google Map with JavaScript, we call the trigger method.

For instance, we write

google.maps.event.trigger(map, 'resize');

to call trigger to trigger the resize event on the map to reload the map.

Conclusion

To manually reload Google Map with JavaScript, we call the trigger method.

Sometimes, we want to insert content into iframe with JavaScript.

In this article, we’ll look at how to insert content into iframe with JavaScript.

How to insert content into iframe with JavaScript?

To insert content into iframe with JavaScript, we use the write method.

For instance, we write

const doc = document.getElementById("iframe").contentWindow.document;
doc.open();
doc.write("Test");
doc.close();

to select the iframe with getElementById.

Then we get its document object with contentWindow.document.

Next, we call open to open the document.

We call write to write the content we want into the iframe’s document.

And then we call close to finish writing.

Conclusion

To insert content into iframe with JavaScript, we use the write method.