Как читать / использовать импортированные таблицы из API в javascript?

Question

Я использую API из Caspio для импорта таблицы данных, которая будет переменной.

Для этого я делаю следующее

<script type="text/javascript" id='Test' src="https://c1afw487.caspio.com/dp/6e444000877ca58e63624b0b8c78/emb"></script>

и затем форматирую его (отправляю это внизу моей веб-страницы) Я делаю это:

 <div id='InfoTable' style='width: 40%; float: left;'>
 <a id='TestTwo' href="https://c1afw487.caspio.com/dp/6e444000877ca58e63624b0b8c78">DataTable </a>
 </div>

Теперь я пытаюсь получить доступ к данным из таблицы. Для этого я пытаюсь что-то вроде этого

var DataTest = document.getElementById('Test');
var DataTestTwo = document.getElementById('TestTwo');


console.log(JSON.stringify(DataTest));
console.log(JSON.stringify(DataTestTwo));

Но первый тест возвращает {}, а второй - ноль (обратите внимание, как я пытался дать идентификатор импортированной таблице, чтобы я мог получить к ней доступ, но любой из мои попытки сработали).

Как правильно обращаться к Таблице?

Answer 1

Я ничего не знаю об этом конкретном API c, но быстрый Google, похоже, предполагает, что у них есть отдельный API для отдыха для запроса JSON данных. Вы должны разобраться в этом.

Строковый элемент html ничего не делает бесполезным ... это элемент html, а не данные вашего запроса.

Вы можете go над таблицей сам и извлеките все содержимое в json. Примерно так.

https://jsfiddle.net/rainerpl/wvdoek03/14/

var getHeaders = (table) => {
    const headerRow = table.tBodies[0].children[0];
    const headers = [];
    let i;
    for (i = 0; i < headerRow.children.length; i++) {
        headers.push(headerRow.children[i].innerText);
    }
    return headers;
}
var getData = (table) => {
    const data = [];
    let i;
    for (i = 1; i < table.tBodies[0].children.length; i++) {
        let newDataRow = [];
        for (j = 0; j < table.tBodies[0].children[i].children.length; j++) {
            newDataRow.push(table.tBodies[0].children[i].children[j].innerText);
        }
        data.push(newDataRow);
    }

    return data;
}



JsonTable = function() {
  const table = document.getElementsByTagName('table')[0];
    const headers = getHeaders(table);
  const data = getData(table);
    this.getRow = (rowNr) => {
    const result = {};
    headers.forEach((key, index) => {
            result[key] = data[rowNr][index];
    });
        return result;
  }

  console.log('table', table, 'has data:', data, ' and headers ', headers);
}
const jsonTable = new JsonTable();
console.log('First row is', jsonTable.getRow(0));
console.log('Second row is', jsonTable.getRow(1));

Вы можете просмотреть вывод консоли на jsFiddle, чтобы увидеть, как он выглядит. (используйте инструмент проверки разработчика, чтобы увидеть вывод консоли)