GDocs ImportHTML/XML not getting proper data

Question

I have a simple Google Spreadsheet's question. I'm attempting to pull in a table and am not having luck with ImportHTML, it will only pull the first top cell and duplicates it somehow. I also tried ImportXML, using XPath Helper to get the proper XPath, and it will not load the proper table data either.

Google Doc:

https://docs.google.com/spreadsheets/d/1-toAivOhywZuErHK0LB5EADiMu_T9ZNUTgMhqFRBHOU/edit?usp=sharing

What I'm needing is the bottom table(id='player_gbs') on the following site:

http://www.forge-db.com/us/us18/players/profile/?server=us18&world=Sinerania&id=12497

Code Snippet

Here is what I've tried so far, this is all represented in the GDoc as well.

=ImportHTML(B1, "table", 2)

Returns the following line twice: "Great Building Era Lvl FP Req. FP FP Left 24h +"

=ImportXML(B1, "/html/body/div[@class='wrap']/div[@class='content'][2]/div[@class='b-box']")

Returns:

"GB's with a new level in the last 24 hours are shown with a yellow background" Great BuildingEraLvlFPReq. FPFP Left24h +Great BuildingEraLvlFPReq. FPFP Left24h +"

Thinking the issue is that contained in the /div is <thead> and <tfoot> before <tbody> so I tried this XPath and just get N/A:

=ImportXML(B1, "/html/body/div[@class='wrap']/div[@class='content'][2]/div[@class='b-box']/div[@id='player_gbs_wrapper']/table[@id='player_gbs']/tbody")

Answer 1

I believe your problem is that that table is created via JSON and javascript. If you view source on that page you'll see this chunk ...

<script type="text/javascript" class="init">
$(document).ready(function() {
    $('#player_gbs').dataTable( {
        "aLengthMenu": [[30], ['All']],
        "processing": true,
        "serverSide": true,
        "ajax": "../../getPlayerGBs.php?id=12497&server=us18",

Which tells us that the data is coming from the following URL. http://www.forge-db.com/us/us18/getPlayerGBs.php?id=12497&server=us18

That URL is providing the data that populates the table.

This script (based off this SO response) will parse the data from that feed and write it to a sheet titled dataImport. It only gets the first two chunks of data, you'd just extend the loop to do more.

function urlDownload() {
var dataImport = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('dataImport');
var apiPoint = "http://www.forge-db.com/us/us18/getPlayerGBs.php?id=12497&server=us18";
var response = UrlFetchApp.fetch(apiPoint);
var response_json = JSON.parse(response.getContentText()); 
var length = response_json.data.length;
var a = [];
for(i=0; i<length; i++){
  dataImport.getRange(i+2, 1, 1, 1).setValue(response_json.data[i][0])
  dataImport.getRange(i+2, 2, 1, 1).setValue(response_json.data[i][1])

 }
}