Categories
JavaScript Answers

How to convert a blob to a base64 string with JavaScript?

To convert a blob to a base64 string with JavaScript, we can use the FileReader instance’s readAsDataURL method.

For instance, we write:

const imageUrl = "https://picsum.photos/200/300";

const reader = new FileReader();
reader.onloadend = () => {
  const base64data = reader.result;                
  console.log(base64data);
}

(async () => {
  const response = await fetch(imageUrl)
  const imageBlob = await response.blob()
  reader.readAsDataURL(imageBlob);  
})()

We create the FileReader instance and set the onloadend property to a function that gets the base64 string from reader.result.

Next, we call fetch with the imageUrl to make a GET request to the image URL.

Then we call response.blob to return a promise with the image blob object.

Finally, we call readAsDataURL with imageBlob to read it into a base64 string.

Categories
JavaScript Answers

How to convert a date string (YYYYMMDD) to a date with JavaScript?

Sometimes, we want to convert a date string (YYYYMMDD) to a date with JavaScript.

In this article, we’ll look at how to convert a date string (YYYYMMDD) to a date with JavaScript.

How to convert a date string (YYYYMMDD) to a date with JavaScript?

To convert a date string (YYYYMMDD) to a date with JavaScript, we can call the JavaScript string’s substring method to extract the year, month, and day from the string.

Then we can use the Date constructor to convert it to a JavaScript date.

For instance, we write:

const dateString = "20200515";
const year = +dateString.substring(0, 4);
const month = +dateString.substring(4, 6);
const day = +dateString.substring(6, 8);

const date = new Date(year, month - 1, day);
console.log(date)

to call substring to extract the year, month and day substrings from the dateString.

Then we use the unary + operator to convert the strings to numbers.

Next, we use the Date constructor with year, month - 1 and day to create the date from the substrings.

We’ve to subtract month by 1 since JavaScript month starts with 0 for January.

Therefore, date is:

Fri May 15 2020 00:00:00 GMT-0700 (Pacific Daylight Time)

Conclusion

To convert a date string (YYYYMMDD) to a date with JavaScript, we can call the JavaScript string’s substring method to extract the year, month, and day from the string.

Then we can use the Date constructor to convert it to a JavaScript date.

Categories
JavaScript Answers

How to get an image from API with JavaScript Fetch API?

Sometimes, we want to get an image from API with JavaScript Fetch API.

In this article, we’ll look at how to get an image from API with JavaScript Fetch API.

How to get an image from API with JavaScript Fetch API?

To get an image from API with JavaScript Fetch API, we can call the response’s blob method and use the FileReader to read the file into a base64 string.

For instance, we write:

const imageUrl = "https://picsum.photos/200/300";

const reader = new FileReader();
reader.onloadend = () => {
  const base64data = reader.result;                
  console.log(base64data);
}

(async () => {
  const response = await fetch(imageUrl)
  const imageBlob = await response.blob()
  reader.readAsDataURL(imageBlob);  
})()

We create the FileReader instance and set the onloadend property to a function that gets the base64 string from reader.result.

Next, we call fetch with the imageUrl to make a GET request to the image URL.

Then we call response.blob to return a promise with the image blob object.

Finally, we call readAsDataURL with imageBlob to read it into a base64 string.

Conclusion

To get an image from API with JavaScript Fetch API, we can call the response’s blob method and use the FileReader to read the file into a base64 string.

Categories
JavaScript Answers jQuery

How to get the total number of elements selected with jQuery?

Sometimes, we want to get the total number of elements selected with jQuery.

In this article, we’ll look at how to get the total number of elements selected with jQuery.

How to get the total number of elements selected with jQuery?

To get the total number of elements selected with jQuery, we can use the length property.

For instance, if we have:

<div>
  foo
</div>
<div>
  bar
</div>
<div>
  baz
</div>

Then we write:

console.log($('div').length)

to log the number of divs selected, which is 3.

Conclusion

To get the total number of elements selected with jQuery, we can use the length property.

Categories
JavaScript Answers

What is the analog of the Date.now() JavaScript method in Moment.js?

Sometimes, we want to use the analog of the Date.now() JavaScript method in Moment.js.

In this article, we’ll find the analog of the Date.now() JavaScript method in Moment.js.

What is the analog of the Date.now() JavaScript method in Moment.js?

The analog of the Date.now() JavaScript method in Moment.js is the moment().valueOf() method.

It returns the UNIX timestamp in milliseconds.