Чтобы обновить DOM на странице с помощью данных, полученных через `fetch`, вам нужно выполнить несколько шагов. Давайте разберем, как это можно сделать, используя JavaScript для выполнения запроса и обновления содержимого HTML.
1. **Создайте HTML-кнопку для выполнения запроса:**
```html
<button id="search-button">Искать</button>
<div id="results"></div>
```
2. **Добавьте JavaScript для обработки нажатия кнопки и выполнения `fetch`-запроса:**
```html
<script>
document.getElementById('search-button').addEventListener('click', function() {
fetch('/api/your-endpoint') // Замените на ваш API endpoint
.then(response => {
if (!response.ok) {
throw new Error('Сеть ответила с ошибкой: ' + response.statusText);
}
return response.json(); // Предполагая, что возвращается JSON
})
.then(data => {
// Очистить предыдущие результаты
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
// Обработать и отобразить новые данные
data.forEach(item => {
const div = document.createElement('div');
div.textContent = item.property; // Замените "property" на нужное вам свойство
resultsDiv.appendChild(div);
});
})
.catch(error => {
console.error('Ошибка:', error);
});
});
</script>
```
3. **Обработка данных на стороне Symfony:**
Убедитесь, что вы правильно настроили обработчик на стороне Symfony, который отвечает на запрос API и возвращает данные в формате JSON. Пример контроллера может выглядеть так:
```php
// src/Controller/YourController.php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;
class YourController extends AbstractController
{
/**
* @Route("/api/your-endpoint", name="api_endpoint")
*/
public function yourApiMethod()
{
// Здесь вы делаете запрос к внешнему API, например с помощью cURL
// и получаете данные в массиве $data
// Пример данных
$data = [
['property' => 'Значение 1'],
['property' => 'Значение 2'],
['property' => 'Значение 3'],
];
return new JsonResponse($data);
}
}
```
### Примечания
- Убедитесь, что ваш сервер правильно обрабатывает CORS, если вы делаете запросы с другого домена.
- Проверьте, что ваши данные возвращаются в правильном формате (обычно JSON).
- Если API возвращает другой тип данных, не забудьте изменить метод `response.json()` на соответствующий.
С помощью вышеуказанных шагов и кода у вас будет кнопка, которая при нажатии будет вызывать запрос к API, и результат будет отображаться в элементе `div` на странице.