Составление таблицы содержания детей с кукловодом

Question

Моя цель - извлечь .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"

Answer 1

Функция map требуется только в том случае, если вы ожидаете нескольких таблиц или тел.Поскольку в вашем примере это не так, вы можете сделать это следующим образом:

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