如何在Chrome中找到JSON后将其放入我的应用程序's开发人员工具

How to get JSON into my app after I locate it in Chrome's Developer tools?

本文关键字：应用程序 我的 工具 开发 Chrome JSON      更新时间：2023-09-26

所以我经常与一家公司合作，他们将网站外包给另一家公司管理。我正试图将网站的数据拉入我的应用程序以填充UITableViewController，但我找不到该网站提供的html页面的源页面(http://www.pointstreak.com/prostats/scoringleaders.html?leagueid=49&季节性＝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中吗？

此外，有没有办法保持我的应用程序的实时版本，因为简单的复制和粘贴可以保持它的静态？谢谢

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

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

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

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

（如果你在同一个原点，你不需要http代理。）

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

我认为最好的方法是与网站创建者交谈，检查他们是否可以为您实现JSON（p）请求的API。因此，您可以轻松创建一个前端应用程序，而无需篡改其中的数据。

更新2015年4月6日（12:12 UTC）

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>

相关文章：