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 should return all resulting urls as string.

var x = Array.prototype.slice.call(document.querySelectorAll(".product_card"))
    .map(function(d,i){
        var title = d.querySelector(".product_card__title"),
            link =  d.querySelector("a");
            console.log(title);
            console.log(link);
        if(title && link && /Rocker/gi.test(title.textContent)){
            return link.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">

Any help highly aprechiated

回答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);