1

Estou fazendo um scrapping em um site que organiza os itens com uma tag <a>, no entanto estou recebendo vários valores com null.

Como posso colocar uma condicional para evitar esses valores null no retorno?

const result = await page.evaluate(() => {
    const medicines = []
    document.querySelectorAll('div > div > div > div > div > a')
            .forEach(
                medicine => if(medicine.getAttribute('title')!== null){
                    medicines.push(medicine.getAttribute('title'))
                    }
                )
    return medicines
  })
1
  • 2
    Tem várias formas, mas por que não usa um for normal que é muito mais fácil fazer isto?^Não é culpa sua, é que tem gente ensinando errado por aí, mas esse código não tem ganho algum fazendo assim, pelo contrário, só há problema.
    – Maniero
    Commented 8/05/2020 às 20:18

3 Respostas 3

1

Não tem como utilizar uma condição if logo após o operador =>.

Quando você declara uma arrow function sem abrir o escopo utilizando chaves, você precisa declarar uma expressão com um retorno. Como if não tem retorno, ele não é um código válido.

Soluções seriam:

Abrir o escopo -

document.querySelectorAll('div > div > div > div > div > a')
    .forEach(medicine => {
        if(medicine.getAttribute('title') !== null ) {
            medicines.push(medicine.getAttribute('title'))
        }
    })

Utilizar uma expressão -

document.querySelectorAll('div > div > div > div > div > a')
    .forEach(medicine => medicine.getAttribute('title') !== null && medicines.push(medicine.getAttribute('title')))

Esse segundo exemplo funciona porque as condições lógicas and e or funcionam com "curto-circuito". Se a primeira expressão da condição for false seguido de um &&, a segunda expressão nem será executada, pois a esse ponto já é claro que o resultado da condição será false.

1

A melhor maneira de fazer isso é usando um .reduce. Dessa maneira podes a cada iteração verificar se o medicine existe e juntá-lo ao array ou não.

Uma sugestão seria:

const result = await page.evaluate(() => {
  const anchors = [...document.querySelectorAll('div > div > div > div > div > a')];
  return anchors.reduce((arr, anchor) => {
    const medicine = anchor.getAttribute('title');
    return medicine ? arr.concat(medicine) : arr;
  }, [])
});

Outra alternativa seria corrigir o erro de sintaxe que tens no teu código. Não podes ter um if diretamente dessa maneira depois de =>. Mas podias fazer assim:

const result = await page.evaluate(() => {
  const medicines = []
  document.querySelectorAll('div > div > div > div > div > a')
    .forEach(
      medicine => medicine.getAttribute('title') && medicines.push(medicine.getAttribute('title'))
    )
  return medicines;
})
1

Só para deixar registrado, você não precisa necessariamente de forEach ou reduce, pois dá para percorrer os elementos encontrados por querySelectorAll com um for..of:

const medicines = [];
for (const a of document.querySelectorAll('div > div > div > div > div > a')) {
    if (a.getAttribute('title') !== null) {
        medicines.push(a.getAttribute('title'));
    }
}
console.log(medicines); // ["title1", "title2", ""]
<div><div><div><div><div>
  <a title="title1"></a>
  <a href="semtitle.html"></a>
  <a title="title2"></a>
  <a href="#title-vazio" title=""></a>
</div></div></div></div></div>

Se bem que neste caso ele também está considerando o último <a>, que tem o atributo title, mas seu valor é uma string vazia. Não ficou claro se é para incluí-lo ou não, mas caso não seja, você pode mudar para if (a.getAttribute('title')) (pois strings vazias são consideradas false, então se o title for vazio, não entrará no if).

Outra alternativa para desconsiderar o title vazio é colocar esta condição no próprio seletor:

const medicines = [];
// pegar somente tags "a" que tem title e o valor não é vazio
for (const a of document.querySelectorAll('div > div > div > div > div > a[title]:not([title=""])')) {
    medicines.push(a.getAttribute('title'));
}
console.log(medicines); // ["title1", "title2"]
<div><div><div><div><div>
  <a title="title1"></a>
  <a href="semtitle.html"></a>
  <a title="title2"></a>
  <a href="#title-vazio" title=""></a>
</div></div></div></div></div>


Também coloquei ponto-e-vírgula no final das linhas. Pode parecer "frescura", mas isso evita algumas situações bizarras que podem ocorrer se você não usá-los (veja mais sobre isso aqui).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .