如何在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請求，那麼您可以添加url參數&format=jsonp會更好。

任何方式，下面是從頁面獲取數據的腳本。腳本的細節見上面我的評論。您也可以在jsfiddle找到它。

如果不存在JS對象，你也可以解析HTML標籤中的數據，但這有點複雜，但也有可能。

（如果你在相同的起源，你並不需要HTTP代理。）

這不是得分表，但該信息的球隊（名稱+網址球隊信息頁）。 評分表是使用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>