如何使用 BeautifulSoup 从 python 网站中的未加载选项卡中抓取表数据

Question

我正在尝试从这个网站上抓取索引数据。 我正在尝试从索引选项卡中抓取翻转数据，但是当我抓取表格时，其内容显示如下：

<table cellspacing="0" class="derivatives_section table table-striped responsive dt-responsive nowrap derivatives_rollover_tbl" id="rollover_index_table" width="100%">
<thead>
<tr>
<th>Index</th>
<th>Future<br/> Price</th>
<th>% Price<br/> Chg.</th>
<th>% OI<br/> Chg.</th>
<th>No. of Shares<br/> Rolled</th>
<th>% Rollover</th>
<th id="ro_idx_1">% Chg Rollover <br/> Vs. 1 Month Avg.</th>
<th>% Rollover <br/>Cost </th>
<th id="ro_idx_2">% Chg Rollover Cost <br/> Vs. 1 Month Avg.</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
<td><div class="text-line loading"></div></td>
</tr>
<tr>

以下是产生与上述相同结果的代码：

import requests
import json
import time
from bs4 import BeautifulSoup

url = 'https://www.indiainfoline.com/markets/derivatives/rollover#derivatives_index'
headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36'}

request = requests.get(url,headers=headers)
soup = BeautifulSoup(request.text,'html.parser')

table = soup.find('table',{'id':'rollover_index_table'})
tbody = table.find('tbody')
tr = tbody.find('tr')
td = tr.find_all('td')

print(td)

如何抓取网站的索引选项卡数据？

Answer 1

数据来自返回 json 的 API 调用。 您可以按如下方式创建数据的 dataframe：

import requests
import pandas as pd

r = requests.get('https://www.indiainfoline.com/api/papi-call-api.php?url=/Derivative/Derivative.svc/FNO-Rollover/FUTSTK/?responsetype=json').json()
df = pd.DataFrame(r['response']['data']['FNORollOverList']['FNORollOverdata'])
print(df)

Answer 2

只是解释@QHarr 做了什么。 本网站的内容是动态生成的。 这意味着内容通过 JavaScript 使用此 Json 文件呈现。 您可以在下面看到当您使用 Bs4 发出请求时数据未加载，这就是您无法检索它的原因。

                        <div class="bs-component deri_roll_main">
                            <div class="row">
                                <div class="col-sm-6 col-xs-12">
                                    <ul class="nav nav-tabs mb0">
                                        <li id="stk_tab" class="active"><a href="#derivatives_stock" data-toggle="tab">Stock</a></li>
                                        <li id="idx_tab"><a href="#derivatives_index" data-toggle="tab">Index</a></li>
                                    </ul>
                                </div>
                                <div class="clearfix hidden visible-xs gray_bdr_b"></div>
                                <div class="col-sm-6 col-xs-12 txt_left_m text-right">
                                    <div class="fill_exp_date w100p"><span>Expiry Date -</span> </div>
                                </div>
                            </div>

                            <div id="myTabContent" class="tab-content">
                                <div class="tab-pane fade active in" id="derivatives_stock">
                                <!-- <table id="derivatives_rollover_tbl" class="derivatives_rollover_tbl display nowrap" style="width:100%">-->
                                    <div class="tablepanel">
                                        <table class="derivatives_section table table-striped  responsive dt-responsive nowrap derivatives_rollover_tbl" cellspacing="0" width="100%" id="rollover_stock_table">
                                        <thead>
                                            <tr>
                                                <th>Script</th>
                                                <th >Future<br> Price</th>
                                                <th>% Price<br> Chg</th>
                                                <th>% OI<br> Chg</th>
                                                <th>No. of Shares<br> Rolled</th>
                                               <th>% Rollover</th>
                                                <th id="ro_stk_1">% Chg Rollover <br> VS 1 Month.Avg</th>
                                                <th>RO<br>Cost </th>
                                                <th id="ro_stk_2">% Chg Rollover <br> VS 1 Month.Avg</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                            <td><div class="text-line loading"></div></td>
                                        </tr>

解决这个问题的一种方法，在这种情况下最好的方法是直接从 API 调用中获取数据。 但这并不总是可能的。 第二种方法是使用另一个支持 Javascript 的工具，它将为您呈现这些数据，例如 Selenium 或 Scrapy 与 Splash。