时间戳

首页 > 解决方案 > 使用 puppeteer 映射表儿童内容

javascript - 使用 puppeteer 映射表儿童内容

问题描述

我的目标是.textContent从不同的<td>标签中获取，每个标签都位于一个单独的<tr>.

我认为问题出在table变量上，因为我没有为孩子检查正确的变量。目前，data变量仅获取第一个<tr>，因此price使用此代码进行评估。然而，volume并turnover没有。我认为这是一个简单的修复，但我就是想不通！

JavaScript：

try {
    const tradingData = await page.evaluate(() => {
      let table = document.querySelector("#trading-data tbody");
      let tableData = Array.from(table.children);
      let data = tableData.map(tradeData => {
        console.log(tradeData);
        let price = tradeData.querySelector(".quoteapi-price").textContent;
        console.log(price);
        let volume = tradeData.querySelector("quoteapi-volume").textContent;
        console.log(volume);
        let turnover = tradeData.querySelector("quoteapi-value").textContent;
        console.log(turnover);
        return { price, volume, turnover };
      })
      return data;
    });

    console.log(tradingData);
  } catch (err) {
    console.log(err);
  }

HTML：

<table id="trading-data" class="qq_table">
    <tbody>
        <tr class="qq_tr_border_bot">
            <td>Price</td>
            <td class="qq_td_right quoteapi-number quoteapi-price" data-quoteapi="price">$0.105</td>
        </tr>
        <tr class="qq_tr_border_bot">
            <td>Change</td>
            <td class="qq_td_right pos" data-quoteapi="changeSignCSS">
                <span data-quoteapi="change (signed)" class="quoteapi-number quoteapi-price quoteapi-change">0.005</span>
                <span data-quoteapi="pctChange (pct)" class="quoteapi-number quoteapi-pct-change">(5.00%)</span>
            </td>
        </tr>
        <tr class="qq_tr_border_bot">
            <td>Volume</td>
            <td class="qq_td_right quoteapi-number quoteapi-volume" data-quoteapi="volume scale=false">5,119,162</td>
        </tr>
        <tr>
            <td>Turnover</td>
            <td class="qq_td_right quoteapi-number quoteapi-value" data-quoteapi="value scale=false">$540,173</td>
        </tr>
    </tbody>
</table>

例如，这应该返回price="$0.11", volume="3,900,558",turnover="$412,187"

标签： javascriptpuppeteer

解决方案

map仅当您期望多个表或 tbodies时才需要该函数。由于您的示例中似乎并非如此，您可以这样做：

const tradingData = await page.evaluate(() => {
    let table = document.querySelector("#trading-data tbody");
    let price = table.querySelector(".quoteapi-price").textContent;
    let volume = table.querySelector(".quoteapi-volume").textContent;
    let turnover = table.querySelector(".quoteapi-value").textContent;
    return { price, volume, turnover };
});
console.log(tradingData);

推荐阅读