Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to create an Asynchronous function in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to create an Asynchronous function in JavaScript.

In this article, we’ll look at how to create an Asynchronous function in JavaScript.

How to create an Asynchronous function in JavaScript?

To create an Asynchronous function in JavaScript, we can use a promise.

For instance, we write

const asyncFunct = new Promise((resolve, reject) => {
  //...
  resolve();
});

to create the asyncFunct promise with the Promise constructor.

We call Promise with a callback that calls resolve when our async code is finished.

Then we use await asyncFunct; to wait for the promise to finish before we run the code below it.

Conclusion

To create an Asynchronous function in JavaScript, we can use a promise.

Categories
JavaScript Answers

How to add Document with Custom ID to Firestore with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add Document with Custom ID to Firestore with JavaScript

In this article, we’ll look at how to add Document with Custom ID to Firestore with JavaScript.

How to add Document with Custom ID to Firestore with JavaScript?

To add Document with Custom ID to Firestore with JavaScript, we call the set method.

For instance, we write

db.collection("cities").doc("LA").set({
  name: "Los Angeles",
  state: "CA",
  country: "USA",
});

to call set to add a document to the cities collection.

We call set with an object with the properties we want to add in a document.

We call doc with the ID of the document before we call set to populate its contents.

Conclusion

To add Document with Custom ID to Firestore with JavaScript, we call the set method.

Categories
JavaScript Answers

How to swap key with value in object with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to swap key with value in object with JavaScript.

In this article, we’ll look at how to swap key with value in object with JavaScript.

How to swap key with value in object with JavaScript?

To swap key with value in object with JavaScript, we can us the Object.entries and Object.fromEntries methods.

For instance, we write

const f = (obj) =>
  Object.fromEntries(Object.entries(obj).map((a) => a.reverse()));

to call Object.entries to return an array of key-value pair arrays.

Then we call map with a callback to reverse the key and value in each nested array with reverse.

Next, we convert the mapped nested array back to an object with Object.fromEntries.

Conclusion

To swap key with value in object with JavaScript, we can us the Object.entries and Object.fromEntries methods.

Categories
Vue Answers

How to fix Vue.js dynamic images not working?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix Vue.js dynamic images not working.

In this article, we’ll look at how to fix Vue.js dynamic images not working.

How to fix Vue.js dynamic images not working?

To fix Vue.js dynamic images not working, we can create a method that returns the path to the image.

For instance, we write

<template>
  <div class="col-lg-2" v-for="pic in pics">
    <img :src="getImgUrl(pic)" v-bind:alt="pic" />
  </div>
</template>

<script>
//...

export default {
  //...
  methods: {
    //...
    getImgUrl(pic) {
      return require("../assets/" + pic);
    },
  },
  //...
};
</script>

to add the getImgUrl method that calls require with the relative path to return the path of the image/

And then we set the src prop to the path string returned by the getImgUrl function.

Conclusion

To fix Vue.js dynamic images not working, we can create a method that returns the path to the image.

Categories
JavaScript Answers

How to use setTimeout on promise chain with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use setTimeout on promise chain with JavaScript.

In this article, we’ll look at how to use setTimeout on promise chain with JavaScript.

How to use setTimeout on promise chain with JavaScript?

To use setTimeout on promise chain with JavaScript, we can create a promise that calls setTimeout.

For instance, we write

await new Promise((resolve) => setTimeout(resolve, 1000));

to create a promise with the Promise constructor by calling it with a callback that calls setTimeout.

And then we use resolve as the callback for setTimeout.

Then we use await to wait for the promise to resolve before running the next line of code.

Conclusion

To use setTimeout on promise chain with JavaScript, we can create a promise that calls setTimeout.