[Solved] javascript remove NULL from the result

by


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="https://stackoverflow.com/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="http://stackoverflow.com/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);

2

solved javascript remove NULL from the result