Author: John Au-Yeung

Sometimes, we want to sort mixed alpha and numeric array with JavaScript.

In this article, we’ll look at how to sort mixed alpha and numeric array with JavaScript.

How to sort mixed alpha and numeric array with JavaScript?

To sort mixed alpha and numeric array with JavaScript, we can use the array sort and string localeCompare methods.

For instance, we write

const sortAlphaNum = (a, b) => a.localeCompare(b, "en", { numeric: true });
console.log(
  [
    "A1",
    "A10",
    "A11",
    "A12",
    "A2",
    "A3",
    "A4",
    "B10",
    "B2",
    "F1",
    "F12",
    "F3",
  ].sort(sortAlphaNum)
);

to define the sortAlphaNum function that calls the localeCompare method to compare strings a and b.

We set numeric to true to let us compare numeric strings.

Then we call sort with sortAlphaNum to return a new array with the items sorted lexically.

Conclusion

To sort mixed alpha and numeric array with JavaScript, we can use the array sort and string localeCompare methods.

Sometimes, we want to get the row count of a HTML table with JavaScript.

In this article, we’ll look at how to get the row count of a HTML table with JavaScript.

How to get the row count of a HTML table with JavaScript?

To get the row count of a HTML table with JavaScript, we can use the rows property.

For instance, we write

<table id="tableId">
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer</td>
    </tr>
  </tfoot>
</table>

to add a table.

Then we write

const table = document.getElementById("tableId");
const totalRowCount = table.rows.length;
const tbodyRowCount = table.tBodies[0].rows.length;

to select the table with getElementById.

Then we use table.rows.length to get a node list of all tr elements in the table.

We use tBodies[0] to get the first tbody element in the table.

And we use rows to get all tr elements in the tbody element.

We get the count of each with length.

Conclusion

To get the row count of a HTML table with JavaScript, we can use the rows property.

Sometimes, we want to wait until an element is visible with Puppeteer and JavaScript.

In this article, we’ll look at how to wait until an element is visible with Puppeteer and JavaScript.

How to wait until an element is visible with Puppeteer and JavaScript?

To wait until an element is visible with Puppeteer and JavaScript, we can use the waitForFunction method.

For instance, we write

await page.waitForFunction(
  "document.querySelector('.btnNext') && document.querySelector('.btnNext').clientHeight !== 0"
);
await page.waitForFunction(
  "document.querySelector('.btnNext') && document.querySelector('.btnNext').style.visibility !== 'hidden'"
);

const btnNext = await page.$(".btnNext");
await btnNext.click();

to call waitForFunction with a string with expressions that checks if the element has a non-zero height and its visibility isn’t hidden.

After that, we get the element with $ and call click to click it.

Conclusion

To wait until an element is visible with Puppeteer and JavaScript, we can use the waitForFunction method.

Sometimes, we want to refresh leaflet map when map container is already initialized with JavaScript.

In this article, we’ll look at how to refresh leaflet map when map container is already initialized with JavaScript.

How to refresh leaflet map when map container is already initialized with JavaScript?

To refresh leaflet map when map container is already initialized with JavaScript, we call the off and remove methods before reloading the map.

For instance, we write

map.off();
map.remove();

to clear the map with off and remove before we reload the map to avoid the error.

Conclusion

To refresh leaflet map when map container is already initialized with JavaScript, we call the off and remove methods before reloading the map.