Category: JavaScript Answers

Sometimes, we want to allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript.

In this article, we’ll look at how to allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript.

How to allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript?

To allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript, we can add a keypress handler and check for the allowed keys inside.

For instance, we write:

<input>

to add an input.

Then we write:

const input = document.querySelector('input')
input.onkeypress = (e) => {
  if (e.keyCode < 48 || e.keyCode > 57) {
    e.preventDefault()
  } else {
    console.log(e.key)
  }
}

to select the input with querySelector.

Then we set input.onkyepress to a function that checks if the key pressed is any other than numbers, backspace, delete, left and right arrow keys with e.keyCode < 48 || e.keyCode > 57.

If this is true, then we call e.preventDefault to stop the keypress.

Otherwise, we log the key value with e.key.

Conclusion

To allow numbers, backspace, delete, left and right arrow keys in an HTML input with JavaScript, we can add a keypress handler and check for the allowed keys inside.

Sometimes, we want to select an element inside an SVG with D3 and JavaScript.

In this article, we’ll look at how to select an element inside an SVG with D3 and JavaScript.

How to select an element inside an SVG with D3 and JavaScript?

To select an element inside an SVG with D3 and JavaScript, we can use the select and selectAll methods.

For instance, we write:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

to add an svg with a circle element in it.

Then we select the circle from the svg by writing:

const circle = d3.select("svg").selectAll("circle")
console.log(circle)

We call select to return the svg element.

Then we call selectAll to select all the circle elements.

Conclusion

To select an element inside an SVG with D3 and JavaScript, we can use the select and selectAll methods.

Sometimes, we want to filter an array of objects that contains a string using Lodash and JavaScript.

In this article, we’ll look at how to filter an array of objects that contains a string using Lodash and JavaScript.

How to filter an array of objects that contains a string using Lodash and JavaScript?

To filter an array of objects that contains a string using Lodash and JavaScript, we can use the string includes method.

For instance, we write:

const collection = [{
    val: "CPP@4@1900-01-01"
  },
  {
    val: "CMIP@5@1900-01-01"
  },
  {
    val: "CMIP@6@1900-01-01"
  },
  {
    val: "CMIP@7@1900-01-01"
  },
  {
    val: "CPP@8@1900-01-01"
  },
  {
    val: "CMIP@9@1900-01-01"
  },
  {
    val: "CMIP@10@1900-01-01"
  }

];
const search = 'CPP@';
const results = _.filter(collection, (item) => {
  return item.val.includes(search);
});
console.log(results);

to call filter with the collection to filter and a callback that returns the condition of the items we want to return.

We use includes to check if item.val has search inside.

Therefore, results is:

[
  {
    "val": "CPP@4@1900-01-01"
  },
  {
    "val": "CPP@8@1900-01-01"
  }
]

Conclusion

To filter an array of objects that contains a string using Lodash and JavaScript, we can use the string includes method.

Sometimes, we want to make a post request with form data with JavaScript and Axios.

In this article, we’ll look at how to make a post request with form data with JavaScript and Axios.

How to make a post request with form data with JavaScript and Axios?

To make a post request with form data with JavaScript and Axios, we can call axios.post with the form data object as the 2nd argument.

For instance, we write:

const formData = new FormData()
formData.append('title', 'foo')
formData.append('description', 'bar')

axios.post('https://jsonplaceholder.typicode.com/posts', formData)

We create a new FormData instance and add some key-value pairs to it with append.

Then we call axios.post with URL to make the request to and the formData object respectively.

We can see form data sent from Chrome’s Network tab’s Payload tab of the request to https://jsonplaceholder.typicode.com/posts.

Conclusion

To make a post request with form data with JavaScript and Axios, we can call axios.post with the form data object as the 2nd argument.

Sometimes, we want to find the async and await equivalent of Promise.resolve().then() in JavaScript.

In this article, we’ll look at how the async and await equivalent of Promise.resolve().then() in JavaScript.

What is the async await equivalent of Promise.resolve().then() in JavaScript?

The async and await equivalent of Promise.resolve().then() in JavaScript is the following:

const fn = async () => {}

(async () => {
  await fn()
})()

fn is the same as Promise.resolve which returns a promise that resolves to an empty value.

We call it and use await so that we wait until fn resolves until we run the next line of code.

Conclusion

The async and await equivalent of Promise.resolve().then() in JavaScript is an async function that returns nothing and adding await before the async function call.