Как можно отобразить данные в формате JSON, полученные с помощью fetch, в HTML-таблице? 

Добрый день! <br/> <br/> У меня есть следующий вопрос: я выполняю fetch-запрос и получаю данные в формате JSON, которые успешно отображаются в консоли с помощью console.log(data). Эти данные извлекаются из базы данных с использованием Entity Framework, поэтому заранее неизвестно количество ячеек, так как пользователи могут добавлять или удалять компоненты. Интересует, как можно реализовать формирование таблицы на JavaScript, заполнить её данными, полученными из JSON, и вывести её на HTML-странице. В итоге, мне нужно отобразить таблицу, запрашиваемую из базы данных, на веб-странице. Заранее спасибо!
  • 17 декабря 2024 г. 13:43
Ответы на вопрос 1 
Добрый день! Для отображения данных в формате JSON в HTML-таблице с использованием JavaScript и `fetch` вы можете выполнить следующие шаги. Предположим, что ваши данные выглядят примерно так:

```json
[
    { "id": 1, "name": "John Doe", "age": 30 },
    { "id": 2, "name": "Jane Smith", "age": 25 },
    { "id": 3, "name": "Alice Johnson", "age": 28 }
]
```

Вот пример кода, который демонстрирует, как вы можете это реализовать:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таблица из JSON</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

<h2>Данные из базы данных</h2>
<table id="data-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Имя</th>
            <th>Возраст</th>
        </tr>
    </thead>
    <tbody>
        <!-- Данные будут добавлены сюда с помощью JavaScript -->
    </tbody>
</table>

<script>
    async function fetchData() {
        try {
            const response = await fetch('URL_ВАШЕГО_API'); // Замените на ваш URL
            if (!response.ok) {
                throw new Error('Сеть не в порядке. Ошибка: ' + response.status);
            }
            const data = await response.json();
            populateTable(data);
        } catch (error) {
            console.error('Ошибка при получении данных:', error);
        }
    }

    function populateTable(data) {
        const tableBody = document.querySelector('#data-table tbody');

        // Очистим предыдущие данные в таблице
        tableBody.innerHTML = '';

        data.forEach(item => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
            `;
            tableBody.appendChild(row);
        });
    }

    // Запустим функцию fetchData при загрузке страницы
    window.onload = fetchData;
</script>

</body>
</html>
```

### Объяснение кода:

1. **HTML-структура**: Мы создали HTML-таблицу с заголовками для ID, имени и возраста.
2. **CSS**: Добавлены стили для таблицы, чтобы сделать её более читабельной.
3. **JavaScript**:
   - `fetchData()` — асинхронная функция, которая выполняет `fetch` запрос к вашему API. Она обрабатывает возможные ошибки и вызывает функцию `populateTable` с полученными данными.
   - `populateTable(data)` — эта функция принимает массив объектов, создаёт строки таблицы и заполняет их данными. Каждая строка добавляется в тело таблицы.
4. **Запуск**: Функция `fetchData` вызывается при загрузке страницы с помощью `window.onload`.

Вы можете заменить `URL_ВАШЕГО_API` на фактический URL вашего API, и скрипт должен корректно отобразить полученные данные в таблице.
Похожие вопросы
    Показать ещё