Category: JavaScript Answers

Sometimes, we want to get the difference between two arrays of objects in JavaScript.

In this article, we’ll look at how to get the difference between two arrays of objects in JavaScript.

How to get the difference between two arrays of objects in JavaScript?

To get the difference between two arrays of objects in JavaScript, we can use the array filter method.

For instance, we write

const arrayOne = [
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "alex" },
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "james" },
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "jane" },
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "bob" },
  { value: "a63a6f77-c637-454e-abf2-dfb9b543af6c", display: "joe" },
];

const arrayTwo = [
  { value: "4a55eff3-1e0d-4a81-9105-3ddd7521d642", display: "alex" },
  { value: "644838b3-604d-4899-8b78-09e4799f586f", display: "james" },
  { value: "b6ee537a-375c-45bd-b9d4-4dd84a75041d", display: "jane" },
  { value: "e97339e1-939d-47ab-974c-1b68c9cfb536", display: "bob" },
];

const results = arrayOne.filter(
  ({ value: id1 }) => !arrayTwo.some(({ value: id2 }) => id2 === id1)
);

console.log(results);

to call arrayOne.filter with a callback that checks if any object with the id that’s the same as the item being looped through in arrayOne with arrayTwo.some.

Then we negate that to find the items in arrayOne that’s not in arrayTwo according to the value values.

Conclusion

To get the difference between two arrays of objects in JavaScript, we can use the array filter method.

Sometimes, we want to convert FormData (HTML5 object) to JSON with JavaScript.

In this article, we’ll look at how to convert FormData (HTML5 object) to JSON with JavaScript.

How to convert FormData (HTML5 object) to JSON with JavaScript?

To convert FormData (HTML5 object) to JSON with JavaScript, we can use the Object.entries method.

For instance, we write

const json = JSON.stringify(Object.fromEntries(formData));

to call Object.fromEntries with formData to convert the form data object to a plain object.

Then we call JSON.stringify to convert the plain object into a JSON string.

The plain object has the keys from the form data keys and the values from the form data values.

Conclusion

To convert FormData (HTML5 object) to JSON with JavaScript, we can use the Object.entries method.

Sometimes, we want to watch HTML input file selection event with JavaScript.

In this article, we’ll look at how to watch HTML input file selection event with JavaScript.

How to watch HTML input file selection event with JavaScript?

To watch HTML input file selection event with JavaScript, we can set the input’s onchange property to a function that runs when we select files.

For instance, we write

input.onchange = (e) => {
  //..
};

to set input.onchange to a function that runs when the file input’s file selection is changed.

Conclusion

To watch HTML input file selection event with JavaScript, we can set the input’s onchange property to a function that runs when we select files.

Sometimes, we want to render HTML inside textarea.

In this article, we’ll look at how to render HTML inside textarea.

How to render HTML inside textarea?

To render HTML inside textarea, we replace it with a contenteditable div.

For instance, we write

<div contenteditable="true">
  This is the first line.<br />
  hello world
  <br /><span style="color: lightgreen">Great</span>.
</div>

to put some HTML inside the div.

We set its contenteditable attribute to true to make the div’s content editable.

Conclusion

To render HTML inside textarea, we replace it with a contenteditable div.

Sometimes, we want to create a JavaScript callback for knowing when an image is loaded.

In this article, we’ll look at how to create a JavaScript callback for knowing when an image is loaded.

How to create a JavaScript callback for knowing when an image is loaded?

To create a JavaScript callback for knowing when an image is loaded, we can use the onload method.

For instance, we write

const logo = document.getElementById("sologo");

logo.onload = () => {
  console.log("The image has loaded!");
};

logo.src = "https://picsum.photos/200/300";

to get the img element with getElementById.

Then we set logo.onload to a function that runs when the image is loaded.

Finally, we set logo.src to the image URL to load the image.

Conclusion

To create a JavaScript callback for knowing when an image is loaded, we can use the onload method.