51 lines
No EOL
2.9 KiB
Markdown
51 lines
No EOL
2.9 KiB
Markdown
# Лабораторная работа №7. Реализация загрузки данных меню с сервера
|
||
|
||
---
|
||
Напишите функцию loadDishes(), которая будет загружать данные о доступных блюдах при помощи запроса к API.
|
||
|
||
## Порядок выполнения
|
||
|
||
Напишите функцию loadDishes(), добавив в нее запрос к API для получения данных о блюдах.
|
||
Данные с сервера приходят в формате JSON. Пример:
|
||
|
||
[
|
||
{
|
||
"category": "soup",
|
||
"count": "350 г",
|
||
"image": "http://lab7-api.std-900.ist.mospolytech.ru/images/soups/gazpacho",
|
||
"keyword": "gaspacho",
|
||
"kind": "veg",
|
||
"name": "Гаспачо",
|
||
"price": 195
|
||
},
|
||
{
|
||
"category": "soup",
|
||
"count": "330 г",
|
||
"image": "http://lab7-api.std-900.ist.mospolytech.ru/images/soups/mushroom_soup",
|
||
"keyword": "gribnoy",
|
||
"kind": "veg",
|
||
"name": "Грибной суп-пюре",
|
||
"price": 185
|
||
}
|
||
]
|
||
|
||
- Для обращения к серверу используйте fetch или XMLHttpRequest.
|
||
- Все блюда должны загружаться на страницу при помощи API.
|
||
- Внешнее отображение страницы должно остаться прежним.
|
||
- Все остальные функции также должны корректно работать (фильтрация, выбор блюда, расчет итоговой стоимости, проверка состава заказа).
|
||
|
||
## API URL
|
||
- Для тех, кто использует хостинг Московского Политеха: [http://lab7-api.std-900.ist.mospolytech.ru/api/dishes](http://lab7-api.std-900.ist.mospolytech.ru/api/dishes)
|
||
- Для тех, кто использует Netlify или GitHub Pages: [https://edu.std-900.ist.mospolytech.ru/labs/api/dishes](https://edu.std-900.ist.mospolytech.ru/labs/api/dishes
|
||
|
||
### Материалы для изучения
|
||
[Получение данных с сервера [MDN]](https://developer.mozilla.org/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
|
||
[Работа с JSON [MDN]](https://developer.mozilla.org/ru/docs/Learn/JavaScript/Objects/JSON)
|
||
[Промисы, async/await [Learn JS]](https://learn.javascript.ru/async)
|
||
[async/await [Doka]](https://doka.guide/js/async-await/)
|
||
[Использование промисов [MDN]](https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Using_promises)
|
||
[Fetch [Learn JS]](https://learn.javascript.ru/fetch)
|
||
[XMLHttpRequest [Learn JS]](https://learn.javascript.ru/xmlhttprequest)
|
||
[Fetch API [MDN]](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||
[fetch() [Doka]](https://doka.guide/js/fetch/)
|
||
[Cross-Origin Resource Sharing (CORS) [MDN]](https://developer.mozilla.org/ru/docs/Web/HTTP/CORS) |