Author: John Au-Yeung

Sometimes, we want to use the JavaScript array splice method with the third parameter as an array.

In this article, we’ll look at how to use the JavaScript array splice method with the third parameter as an array.

How to use the JavaScript array splice method with the third parameter as an array?

To use the JavaScript array splice method with the third parameter as an array, we can use the spread operator with splice.

For instance, we write:

const a1 = ['a', 'e', 'f'];
const a2 = ['b', 'c', 'd'];

a1.splice(1, 0, ...a2);
console.log(a1)

to call a1.splice with 1, 0 and the entries of the a2 array as arguments.

This inserts 'b', 'c' and 'd' between 'a' and 'e' in `a“.

Therefore, a1 is ['a', 'b', 'c', 'd', 'e', 'f'].

Conclusion

To use the JavaScript array splice method with the third parameter as an array, we can use the spread operator with splice.

To convert an array of objects to object with key value pairs with JavaScript, we can use the Object.fromEntries method.

For instance, we write:

const array = [{
  name1: "value1"
}, {
  name2: "value2"
}]

const map = array.map(a => {
    return Object.entries(a)
  })
  .flat()
const obj = Object.fromEntries(map)
console.log(obj)

We call array.map with a callback to return the key-value pair of each object in array as a nested array.

Then we call flat to flatten the array.

Next, we call Object.fromEntries with the map key-value pair nested array to combine the key-value pairs into an object.

Therefore, obj is {name1: 'value1', name2: 'value2'}.

Sometimes, we want to get the text inside an li element when it’s clicked with JavaScript.

In this article, we’ll look at how to get the text inside an li element when it’s clicked with JavaScript.

How to get the text inside an li element when it’s clicked with JavaScript?

To get the text inside an li element when it’s clicked with JavaScript, we can listen to the click event on the document.

Then if an li is clicked, we get the text.

For instance, we write:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

to add some li elements.

Then we write:

document.onclick = (e) => {
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target.innerText)
  }
}

to set the document.onclick property to a function that gets the clicked element with the e.target property.

Then we check the tagName of the element that’s clicked to see if it’s 'li'.

If it is, then we get the text of the li element with e.target.innerText.

Conclusion

To get the text inside an li element when it’s clicked with JavaScript, we can listen to the click event on the document.

Then if an li is clicked, we get the text.

Sometimes, we want to show div when radio button selected with JavaScript.

In this article, we’ll look at how to show div when radio button selected with JavaScript.

How to show div when radio button selected with JavaScript?

To show div when radio button selected with JavaScript, we can listen to the change event of the radio buttons.

For instance, we write:

<input type='radio' name='foo'>
<input type='radio' name='foo'>
<input type='radio' name='foo'>
<div style='display: none'>
  hello
</div>

to add radio buttons and a div that shows when we click on any radio button.

Then we write:

const input = document.querySelectorAll('input')
const div = document.querySelector('div')
for (const i of input) {
  i.onchange = () => {
    div.style.display = 'block'
  }
}

to select all the radio inputs and the div with querySelectorAll and querySelector.

Next, we loop through each input and set the onchange property to a function that’s called when the radio button checked value is changed.

In the function, we set the display CSS property to block to show the div.

Conclusion

To show div when radio button selected with JavaScript, we can listen to the change event of the radio buttons.

Sometimes, we want to split the URL to get URL path in with JavaScript.

In this article, we’ll look at how to split the URL to get URL path in with JavaScript.

How to split the URL to get URL path in with JavaScript?

To split the URL to get URL path in with JavaScript, we can create a URL instance from the URL string.

Then we can use the pathname property to get the URL path.

For instance, we write:

const url = 'http://www.example.com/foo/path2/path3/path4';
const {
  pathname
} = new URL(url);
console.log(pathname);

We create a URL instance from url.

Then we get the pathname from the pathname property.

Therefore, pathname is '/foo/path2/path3/path4'.

Conclusion

To split the URL to get URL path in with JavaScript, we can create a URL instance from the URL string.

Then we can use the pathname property to get the URL path.