Javascript Remove NULL From The Result

For the sake of me i can't get the Filter (.filter(function(d,i){return d})) to eliminate 'undefined' or '0' working on this array. The script runs within a Applescript applet and

Solution 1:

First, you can get rid of some of that inner DOM selection by making your initial qSA selection more specific: ".product_card a .product_card__title".

Then you can use .filter() by returning the result of checking if each element .includes() the "rocker" text. Do this before mapping the .href.

Finally, .map() those results to the .href of each .parentNode, since we selected the child with the text directly.

var x = Array.prototype.slice.call(document.querySelectorAll(".product_card a .product_card__title"))
  .filter(function(d) {
    return d.textContent.toLowerCase().includes("rocker")
  })
  .map(function(d) { return d.parentNode.href });

document.getElementById("result").textContent = JSON.stringify(x);

<div class="product_card powersearch__product_card">
  <a href="/shop/XYZ" class="js-search-product-link">
    <div class="product_card__image" style="background-image:url(https://image.jpg);"></div>
    <div class="product_card__title">some rocker</div>
    <div class="product_card__meta">€14</div>
  </a>
</div>
<br>
<div class="product_card powersearch__product_card">
  <a href="/shop/ZXY" class="js-search-product-link">
    <div class="product_card__image" style="background-image:url(https://image.jpg);"></div>
    <div class="product_card__title">returns undefined</div>
    <div class="product_card__meta">€14</div>
  </a>
</div>
<br>
<div id="result">

---

And of course it's a bit cleaner with modern syntax.

const x = Array.from(document.querySelectorAll(".product_card a .product_card__title"))
  .filter(d => d.textContent.toLowerCase().includes("rocker"))
  .map(d => d.parentNode.href);

document.getElementById("result").textContent = JSON.stringify(x);