在 Chrome 的开发者工具中找到 JSON 后，如何将它导入我的应用程序？

Question

所以我经常与一家公司合作，他们将网站外包给另一家公司进行管理。我正在尝试将网站的数据拉入我的应用程序以填充 UITableViewController，但我找不到该网站呈现的 html 页面的源页面 (http://www.pointstreak.com/prostats/scoringleaders.html?leagueid=49&seasonid=12983)。我使用了 Chrome 的开发者工具，并在 JSON 中找到了该站点的表格数据（我想，我不确定）。开头是这样的：

<table width="98%" class="tablelines" cellpadding="2" border="0" cellspacing="1">
        <tr>
          <td colspan="17" class="maincolor">
            <a href="scoringleaders.html?leagueid=49&seasonid=12983&position=D">View Defense</a> | <a href="scoringleaders.html?leagueid=49&seasonid=12983&position=F">View Forwards</a> | <a href="scoringleaders.html?leagueid=49&seasonid=12983">All Positions</a>             </td>  
          </tr>
          <tr align="center" class="tableheader"> 
            <td width="2%">RK</td>
            <td align="left" width="20%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=name">PLAYER</a></td>
            <td width="6%">TEAM</td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=pos">Pos.</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=gp">GP</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=g">G</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=a">A</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983">PTS</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=plusminus"> +/-</a></td><td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=pim">PIM</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=ppg">PP</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=ppa">PPA</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=shg">SH</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=sha">SHA</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=gwg">GWG</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=shots">SHOTS</a></td>
            <td width="6%"><a class="sort" href="scoringleaders.html?leagueid=49&seasonid=12983&sortby=spct">S%</a></td>
            </tr>
        <tr align="center" class="maincolor"> 
            <td class="light">
            1               </td> 
            <td  class="light"align="left"><a href="playerpage.html?playerid=7208177&seasonid=12983">Johnson, Adam</a></td>
            <td><a href="teamplayerstats.html?teamid=3138&seasonid=12983">SC</a></td>

我认为它是 JSON。现在，由于这只是在 Chrome 的开发人员工具中，而不是当我输入某个 URL 时页面上出现的内容，有没有办法将这些数据加载到我的 tableView 中？

此外，是否可以保留一个实时版本来为我的应用程序提供内容，因为简单的复制和粘贴会使其保持静态？谢谢。

Answer 1

首先，如果您与网站创建者合作，您应该仅将下面的代码用于开发。在我看来，这有点像从他们的页面中窃取数据。

如果他们可以在他们的后端实现对 JSON 或 JSONP 的请求会更好，这样您就可以添加像 &format=jsonp 这样的 url 参数。

无论如何，下面是从页面获取数据的脚本。脚本的详细信息请参见我上面的评论。你也可以在jsfiddle找到它。

如果没有 JS 对象，您可能还可以从 HTML 标记中解析数据，但这有点复杂，但也是可能的。

（如果您在同一来源，则不需要 http 代理。）

这不是分数表，而是球队的信息（名称 + 球队信息页面的 url）。 分数表是用 PHP 创建的。您可以看到这一点，因为如果您在表中使用过滤器，它会向后端创建一个新请求。

我认为最好与网站创建者交谈并检查他们是否可以为您实现 JSON(P) 请求的 API。 因此，您可以轻松地创建一个前端应用程序，而无需从那里摆弄数据。

---

2015 年 4 月 6 日（世界标准时间 12:12）更新

可以提取 HTML 标记 - 请参阅此jsFiddle。如前所述，它更复杂。

但我认为最好的办法是使用生成的 JSON 并使用像 mocky.io 这样的模拟服务，因为如果您只需要它来测试您的应用程序，它会更快而且还可以。

$.ajax({
    url: 'https://cors-anywhere.herokuapp.com/http://www.pointstreak.com/prostats/scoringleaders.html?leagueid=49&seasonid=12983',
    method: 'GET',
    success: function (data) {
        //console.log(data);
        regEx = /var team_source\s*=\s*\[([^\]]+)]/; // regex to filter the team_source variable
      
        // now find the js object with the braces [ ]
        console.log(regEx.exec(data));
        eval(regEx.exec(data)[0]);
        //var team = new Object(team_source);
        console.log(team_source[0].label); // now you can work with the js object
        $('#output').html(JSON.stringify(team_source, null, 2));
        
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="output"></pre>