Создать таблицу данных из данных API - javascript, JQuery, ajax
Я пытаюсь создать таблицу из API, используя JQuery в javascript, я новичок в этом языке, и мне непонятно, как получить доступ к данным, которые возвращаются из запроса .ajax.
В приведенном ниже коде я могу получить данные и вернуть их в консоль, но когда я пытаюсь установить переменную для визуализации, я получаю сообщение об ошибке:
"<a class='gotoLine' href='#65:39'>65:39</a> Uncaught ReferenceError: data is not defined"
Есть ли шаг, который мне не хватает, чтобы установить переменную data на что-то, к чему я могу получить доступ вне запроса на выборку?
Вот мой код:
#HTML
<script src = "script.js"></script>
<table>
<thead>
<tr>
<th>City</th>
<th>County</th>
<th>Percent Immunized</th>
</tr>
</thead>
<tbody id = "vaxData">
#JS
$.ajax({
url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
type: "GET",
data: {
"$limit" : 5000,
"$$app_token" : "aGFbKDOg0gCeCm2c9Od2EsFjL"
}
}).done(function(data) {
alert("Retrieved " + data.length + " records from the dataset!");
console.info(data);
return data
});
var vaxData = document.getElementById(data);
в «сделано (обратный вызов)» вы получаете данные, но нигде их не сохраняете. Либо вы обрабатываете свои данные, а затем представляете их в представлении (как показал вам @rajatJha), либо сохраняете их в переменной за пределами области обратного вызова, чтобы к ним можно было получить доступ позже. Кроме того, getElementById принимает строку, а не набор данных.
Вот мне и интересно, как хранить.
сохранить любую базу данных
Проблема, с которой я столкнулся в этом примере, заключается в том, что он использует недавно объявленную переменную для создания «данных». Я пытаюсь понять, как взять данные, возвращаемые командой fetch, и поместить их в переменную, которую можно использовать в другом месте сценария.
Как еще вы хотели бы использовать данные, кроме обновления таблицы?
Спасибо, Бен, у меня действительно возникли проблемы с созданием переменной за пределами первоначального подключения к API, которую я могу использовать для доступа к данным. Если вы посмотрите на скрипт, вы увидите, что я пытался создать функцию для хранения данных в виде переменной, но я все еще получаю сообщение об ошибке function is not defined.
Что я пытаюсь сделать, так это взять return data и поместить это в переменную, которую я могу использовать в другом месте. После этого я могу начать смотреть на html и т.д.
Но нужно ли вам «хранить» данные или вы можете просто использовать их для обновления таблицы, а затем забыть об этом?
В конечном итоге я хочу использовать его для создания визуализаций, поэтому, как только данные будут сохранены в объекте, который я смогу использовать в другом месте, у меня будет гораздо больше возможностей. Новая рабочий пример - jsfiddle.net/jconoranderson/bgk3Lvx5/45
Помогает ли ответ, который я дал ниже, вообще?
Давайте продолжим обсуждение в чате.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Конкретная ошибка, которую вы получаете, относится к этой строке:
var vaxData = document.getElementById(data);
Так как здесь нет переменной данных в области видимости.
Вы можете подумать, что возврат значения из обратного вызова done заполнит эту переменную, но этого не произойдет, потому что она находится в другой области (что вы можете исправить, объявив данные var перед вызовом $.ajax), и это происходит в другое время и контекст. Выполнение javascript не будет ждать завершения обратного вызова done, и var vaxData = document.getElementById(data); запустится до того, как запустится alert("Retrieved " + data.length + " records from the dataset!");. Лучшее объяснение такого рода вещей можно найти на MDN.
Кроме того, document.getElementById() ожидает строку, а не массив, как должны быть данные, возвращаемые из API.
Чтобы решить эту проблему, вы можете объявить переменную data перед вызовом $.ajax и выполнить обновление таблицы в функции обратного вызова done. В приведенном ниже примере я использовал функцию с именем update_table, чтобы сделать это, и я вызвал datavaccination_data.
Еще одна проблема заключается в том, что в вашем примере HTML для таблицы не завершен.
var vaccination_data = [];
$.ajax({
url: "https://health.data.ny.gov/resource/nvtm-yit2.json",
type: "GET",
data: {
"$limit" : 5000,
"$$app_token" : 'your_app_token'
}
}).done(function(api_data) {
vaccination_data = api_data;
update_table();
});
var vaxData = document.getElementById('vaxData');
const cell_keys = ['city', 'county', 'percentcompletelyimmunized'];
function create_element(tag, attributes, children = []) {
const element = Object.assign(document.createElement(tag), attributes);
element.append(...children);
return element;
}
function create_row_element(item) {
return create_element(
'tr', {},
cell_keys.map( (key) => create_element('td', { innerHTML: item[key] }) )
);
}
function update_table() {
vaxData.innerHTML = '';
vaxData.append(...vaccination_data.map(create_row_element));
}
<table>
<thead>
<tr>
<th>City</th>
<th>County</th>
<th>Percent Immunized</th>
</tr>
</thead>
<tbody id = "vaxData"></tbody>
</table>
Отредактируйте, чтобы добавить эту строку: vaccination_data = api_data; также использует что-то, называемое замыканием, чтобы функция обратного вызова done имела ссылку на переменную vaccination_data.
Это очень полезно, спасибо! Я ценю ваш подробный ответ. Хотя, когда я пытаюсь запустить это в jsfiddle, я получаю сообщение об ошибке: "<a class='gotoLine' href='#52:1'>52:1</a> Uncaught ReferenceError: $ is not defined". Я пытаюсь отлаживать, прежде чем, наконец, соглашусь, я все еще учусь различать ошибки .js. Я привык к python, где он определяет точную строку...
Включаете ли вы jQuery в новую скрипку?
Ах, неважно! Я запускал его на чистом javascript. Большое спасибо за вашу помощь и терпение. Я очень новичок в javascript.
Еще один вопрос @Бен Стивенс. Если бы я хотел получить доступ к данным в таблице как к объекту. Как бы я это сделал? Например, функция vaxData возвращает a. не больше информации, чем просто объект json, содержащий данные...
@JohnConor Я не думаю, что понимаю вопрос. vaxData — это переменная, содержащая ссылку на объект HTMLElement. По «Если бы я хотел получить доступ к данным в таблице как к объекту». вы имеете в виду данные, которые вы получили из API, или содержимое ячеек таблицы (или что-то еще)?
Извините, я подхожу к этому в своей питоновой шляпе. То, что я пытаюсь достичь помимо таблицы, - это var, который является объектом, содержащим json данные. Что-то, к элементам которого я могу получить доступ и использовать данные для создания визуализаций и т. д. Что-то похожее на фрейм данных pandas.
@JohnConor vaccination_data содержит данные из API, они используются в приведенном выше коде в функции update_table для создания строк и ячеек таблицы, но это может использовать любая функция с доступом к переменной vaccination_data.
Понял, спасибо! Вы были невероятно полезны. Спасибо за ваше время.
Привет Джон, пожалуйста, проверьте это: stackoverflow.com/questions/52399080/…