Задача
Есть API, который в ответ на запрос отдает json со списком фреймворков и их описанием. Необходимо на его основе отрендерить карточки.
Алгоритм
- Получить список;
- Обработать список;
- Отрендерить в HTML.
1. Получить список
Для данной статьи я подготовил тестовые данные, которые можно получить по адресу:
https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...
Чтобы сделать HTTP запрос — используйте метод fetch:
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
2. Обработать список
Вот как выглядит json, который мы получаем:
{
"success": true,
"list": [
{
"title": "React",
"text": "React is an open-source...
Напишем функцию buildHTML, которая на вход будет принимать JSON, а отдавать строку, которую мы в будущем используем как HTML:
// HTTP запрос
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
// переводим ответ в json
.then(response => response.json())
// конвертируем в html
.then(buildHTML)
Определение функции:
const buildHTML = ({ list }) =>
list.map(({ title, text }) => (`
<div>
<h2>${title}</h2>
<p>${text}</p>
</div>
`)).join("");
3. Отрендерить в HTML
fetch("https://private-531a0-vadimfilimonovblog.apiary-mock.com/fra...")
.then(response => response.json())
.then(buildHTML)
.then(render); // полученный результат передает в функцию render
В файле HTML создадим пустой контейнер, куда будем вставлять карточки:
<div class="container"></div>
https://developer.mozilla.org/en-US/docs/Web/API/Element/inn... функции render сводится лишь к использованию свойства innerHTML:
const render = (html) => {
const container = document.querySelector('.container');
container.innerHTML = html;
};
Полную версию кода смотрите на codepen.
