Author: John Au-Yeung

Sometimes, we want to convert an HTML table to an array in JavaScript.

In this article, we’ll look at how to convert an HTML table to an array in JavaScript.

How to convert an HTML table to an array in JavaScript?

To convert an HTML table to an array in JavaScript, we can use the spread operator and some array methods.

For instance, we add a table with:

<table id="cartGrid">
  <thead>
    <tr>
      <th>Item Description</th>
      <th>Qty</th>
      <th>Unit Price</th>
      <th>Ext Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Old Lamp</td>
      <td>1</td>
      <td>107.00</td>
      <td>107.00</td>
    <tr>
      <td>Blue POst</td>
      <td>2</td>
      <td>7.00</td>
      <td>14.00</td>
  </tbody>
</table>

Then we write:

const table = document.querySelector('table')
const arr = [...table.rows].map(r => [...r.querySelectorAll('td, th')].map(td => td.textContent))
console.log(arr)

to get all the tr elements in a node list with table.rows.

Then we spread them into an array.

Next, we call map with a callback that select all the td’s or th’s, spread them into an array, and then call map on them to get their textContent.

As a result, arr is:

[
  [
    "Item Description",
    "Qty",
    "Unit Price",
    "Ext Price"
  ],
  [
    "Old Lamp",
    "1",
    "107.00",
    "107.00"
  ],
  [
    "Blue POst",
    "2",
    "7.00",
    "14.00"
  ]
]

Conclusion

To convert an HTML table to an array in JavaScript, we can use the spread operator and some array methods.

Sometimes, we want to rank array elements with JavaScript.

In this article, we’ll look at how to rank array elements with JavaScript.

How to rank array elements with JavaScript?

To rank array elements with JavaScript, we can use the sort method.

For instance, we write:

const arr = [79, 5, 18, 5, 32, 1, 16, 1, 82, 13];
const sorted = arr.slice().sort((a, b) => b - a)
const ranks = arr.map(v => sorted.indexOf(v) + 1);
console.log(ranks);

We call arr.slice to make a copy of arr.

Then we call sort on it to return a sorted version of arr sorted in descending order.

Then we call arr.map with a callback that returns the position of the sorted array the arr entry v is in plus 1.

Therefore, ranks is [2, 7, 4, 7, 3, 9, 5, 9, 1, 6].

Since 79 is 2nd largest, 5 is 7th largest etc.

Conclusion

To rank array elements with JavaScript, we can use the sort method.

Sometimes, we want to get an image natural height with JavaScript.

In this article, we’ll look at how to get an image natural height with JavaScript.

How to get an image natural height with JavaScript?

To get an image natural height with JavaScript, we can use the naturalHeight property.

For instance, we write:

<img src='https://picsum.photos/200/300'>

to add an img element.

Then we write:

const image = document.querySelector('img')
console.log(image.naturalHeight)

to select the img element with querySelector.

And then we use the image.naturalHeight property to get the natural height of the image.

Conclusion

To get an image natural height with JavaScript, we can use the naturalHeight property.

Sometimes, we want to convert a JavaScript array of 2 element arrays into object key value pairs.

In this article, we’ll look at how to convert a JavaScript array of 2 element arrays into object key value pairs.

How to convert a JavaScript array of 2 element arrays into object key value pairs?

To convert a JavaScript array of 2 element arrays into object key value pairs, we can use the Object.fromEntries method.

For instance, we write:

const array = [
  ['a', 1],
  ['b', 2],
  ['c', 3]
];
const object = Object.fromEntries(array);
console.log(object);

to call Object.fromEntries with an array of key-value pair arrays.

Therefore, object is {a: 1, b: 2, c: 3}.

Conclusion

To convert a JavaScript array of 2 element arrays into object key value pairs, we can use the Object.fromEntries method.

Sometimes, we want to submit form on enter key press with JavaScript.

In this article, we’ll look at how to submit form on enter key press with JavaScript.

How to submit form on enter key press with JavaScript?

To submit form on enter key press with JavaScript, we can listen for the keydown event.

For instance, we write:

<form>
  <input>
</form>

to add a form.

Then we write:

const input = document.querySelector('input')
input.onkeydown = (e) => {
  if (e.keyCode === 13) {
    e.preventDefault()
    console.log('submit')
  }
};

to select the input with querySelector.

Then we set input.onkeydown to a function that checks if the key that’s pressed if the enter key.

We check that by checking if e.keyCode is 13.

Conclusion

To submit form on enter key press with JavaScript, we can listen for the keydown event.