#javascript #asynchronous
#javascript #асинхронный
Вопрос:
У меня есть этот скрипт, который получает csv-файл и разделяет его по столбцам. У меня возникли проблемы с отображением значений в таблице. Кажется, я не могу заставить каждый столбец создавать новую строку таблицы. Любая помощь будет оценена, поскольку я не очень хорошо разбираюсь в JS.
<script>
getData();
async function getData() {
const response = await fetch('data.csv')
const data = await response.text();
console.log(data);
const table = data.split('n');
table.forEach(row => {
const columns = row.split(',')
const date = columns[0]
const temp = columns[1]
console.log(date, temp);
})
}
</script>
Data.csv выглядит примерно так:
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
17-10-2020,25
Console.log(data, temp) возвращает без запятых. Моя единственная проблема заключается в попытке поместить их в таблицу с помощью Javascript.
<table class="table text-left mt-2" id="data">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Date/Time</th>
<th scope="col">Temperature</th>
</tr>
</thead>
<tbody>
<!-- Generate the csv table rows here -->
</tbody>
</table>
Ответ №1:
const tableBody = document.getElementById("table-body");
getData();
async function getData() {
const response = await fetch('data.csv')
const data = await response.text();
console.log(data);
const table = data.split('n');
table.forEach((row,index) => {
const columns = row.split(',')
const date = columns[0]
const temp = columns[1]
console.log(date, temp);
const tr = document.createElement("tr");
tr.innerHTML = `
<td>${index 1}</td>
<td>${date}</td>
<td>${temp}</td>
`;
// finally add the <tr> to the <tbody>
tableBody.append(tr);
})
}
<table class="table text-left mt-2" id="data">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Date/Time</th>
<th scope="col">Temperature</th>
</tr>
</thead>
<tbody id='table-body'>
<!-- Generate the csv table rows here -->
</tbody>
</table>
Попробуйте это и дайте мне знать, работает ли он или нет. Пожалуйста, обратите внимание, что я добавил идентификатор в тело таблицы и выбрал его через ID.
Комментарии:
1. Похоже, что в таблице ничего не отображается
2. Проблема с вашим кодом / вопросом заключается в том, что неясно, как вы получаете данные / структуру данных. Вот посмотрите на эту ссылку, codepen.io/dipankarmaikap/pen/MWeyzzX
3. Большое вам спасибо, сэр, я понял, что у меня есть тег script над html-страницей, он должен быть внизу, чтобы он мог читать таблицу для добавления.