The Web Dev

Sometimes, we want to put an image file in a JSON object with JavaScript.

In this article, we’ll look at how to put an image file in a JSON object with JavaScript.

How to put an image file in a JSON object with JavaScript?

To put an image file in a JSON object with JavaScript, we convert it to a data URI.

For instance, we write

const convertToDataURLviaCanvas = (url, callback, outputFormat) => {
  const img = new Image();
  img.crossOrigin = "Anonymous";
  img.onload = () => {
    const canvas = document.createElement("CANVAS");
    const ctx = canvas.getContext("2d");
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    const dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = url;
};

convertToDataURLviaCanvas("http://bit.ly/18g0VNp", (base64Img) => {
  //...
});

to define the convertToDataURLviaCanvas function.

In it, we create an img element with the Image constructor.

Then we set its onload property to a function that creates a canvas with createElement.

Then we call getContext to get the context object.

We call drawImage to draw the image onto the canvas.

And we get the base64 data URI with toDataURL.

We then load the image with the url by setting the src property.

Next, we call convertToDataURLviaCanvas with the image URL and a callback that has the base 64 URI string in the base64Img parameter.

Conclusion

To put an image file in a JSON object with JavaScript, we convert it to a data URI.

Sometimes, we want to get range of items with JavaScript array.

In this article, we’ll look at how to get range of items with JavaScript array.

How to get range of items with JavaScript array?

To get range of items with JavaScript array, we use the slice method.

For instance, we write

const fruits = ["apple", "banana", "peach", "plum", "pear"];
const slice1 = fruits.slice(1, 3);

to call fruits.slice with index 1 and 3 to return an array with the items in fruits between indexes 1 and 2.

Conclusion

To get range of items with JavaScript array, we use the slice method.

Sometimes, we want to check for duplicate strings in JavaScript array.

In this article, we’ll look at how to check for duplicate strings in JavaScript array.

How to check for duplicate strings in JavaScript array?

To check for duplicate strings in JavaScript array, we call the filter method.

For instance, we write

const strArray = ["q", "w", "w", "w", "e", "i", "u", "r"];
const findDuplicates = (arr) =>
  arr.filter((item, index) => arr.indexOf(item) !== index);

to define the findDuplicates method.

In it, we call arr.filter with a callback that checks if the first index of item isn’t index.

If they’re different, then the item is a duplicate.

Conclusion

To check for duplicate strings in JavaScript array, we call the filter method.

Sometimes, we want to search an array for a substring match with JavaScript.

In this article, we’ll look at how to search an array for a substring match with JavaScript.

How to search an array for a substring match with JavaScript?

To search an array for a substring match with JavaScript, we call the filter and includes methods.

For instance, we write

const items = ["item 1", "thing", "id-3-text", "class"];
const matches = items.filter((s) => s.includes("thi"));

to call items.filter with a callback that checks if string s in items includes 'thi' with includes.

Sometimes, we want to find a value in an array of objects in JavaScript.

In this article, we’ll look at how to find a value in an array of objects in JavaScript.

How to find a value in an array of objects in JavaScript?

To find a value in an array of objects in JavaScript, we use the filter method.

For instance, we write

const people = [
  { name: "bob", dinner: "pizza" },
  { name: "john", dinner: "sushi" },
  { name: "larry", dinner: "hummus" },
];
const filterted = people.filter((person) => {
  return person.dinner === "sushi";
});

to call people.filter with a callback that checks if the items in people has dinner property equal to 'sushi' and return them in a new array.

Conclusion

To find a value in an array of objects in JavaScript, we use the filter method.