Cheerio、axios、reactjs 从网页上抓取表格并返回空列表

Question

试图从本网站上删除此表格：https://www.investing.com/commodities/real-time-futures

但是由于某种原因，当我尝试获取数据时，我不断得到一个空列表。

这就是我正在做的获取数据并解析它的事情：

componentDidMount() {
    axios.get(`https://www.investing.com/commodities/real-time-futures`)
      .then(response => {
        if(response.status === 200)
          {
            const html = response.data;
            const $ = cheerio.load(html);
            let data = [];
            $('#cross_rate_1 tr').each((i, elem) => {
                data.push({
                  Month: $(elem).find('td#left noWrap').text()
                })
            });
            console.log(data);
          }
        }, (error) => console.log('err') );
  }

这是我试图抓取的源代码特定部分的屏幕截图。

非常感谢任何帮助。

Answer 1

正如已经提到的，相关表通过 websocket 连接不断更新。您可以尝试通过 1) 连接到 websocket 或 2) 抓取动态生成的 html 来获取数据。

仅针对数据快照而不是连续时间序列，您可以使用浏览器抓取扩展程序。这样你就不会关心websocket的实现了。

我已经为您确定了价格数据 CSS 选择器，并创建了一个与开源浏览器扩展一起使用的抓取配置https://github.com/get-set-fetch/extension。

“eLtI4gnapZTLDsIgEEV/hejGLrC+F25N3OrCpulD6FhIWmiY0f6+1Hd9EJsuSEguGRg4h8fSlS0Km/r3ZesjHR0g2zrtKzL2IYg1wOqLZ2hEicrSwxhFVOIyjquqGmpzAiRtsqG0 RSxv5TVg7EDkvC7AD9etmqJlQBz9ONRW8HvgJ06UwD2HpCV/gtpFylFnC39A/s51A3qphMlg94ruBbtNCe5iMr5/EP/S3ICZf4H5myP/0tv3rSIm/oiQjBmlS0OKS6XzdDCJ9iYQT8PxLBzPw/ Ei6rWwpZ0dZ2cMF5M="

在扩展内执行以下操作：新项目 > 配置哈希 > 粘贴上面的哈希（不带引号）> 保存、抓取、查看结果 > 导出为 csv。

免责声明：我是扩展作者。

Answer 2

自原始帖子以来，该页面可能已发生变化，但它似乎可以通过静态 HTML 进行抓取。这可以以轮询方式运行：

const axios = require("axios"); // 1.4.0
const cheerio = require("cheerio"); // 1.0.0-rc.12

const url = "<Your URL>";

axios
  .get(url)
  .then(({data: html}) => {
    const $ = cheerio.load(html);
    const data = [...$("table")].map(table => {
      const headers = [...$(table).find("th")]
        .map(e => $(e).text().trim());
      return [...$(table).find("> tbody > tr")].map(tr =>
        Object.fromEntries(
          [...$(tr).find("> td")]
            .map((td, i) => [headers[i], $(td).text().trim()])
            .filter(e => Boolean(e[1]))
        )
      );
    });
    console.log(data);
  })
  .catch(err => console.error(err));