Задача

Есть 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.

Добрый вечер, мои дорогие подписчики. Сорян, я тут дичал, исполнял всякое, бухал и не только)
Осеннее обострение, что поделать. Впал было в лютую тоску, мыслишки не хорошие всякие посещали, это похоже из-за того, что начал к плюсам приобщаться. Ну блин зато теперь могу на голом Vulcan'е треугольник нарисовать)) Такое конечно достижение, морочить вам и себе голову этим пока не буду, ближе к выходу Godot4 уже скорее всего, главное путь наметился, для программиста графики можно сказать как Hello World. А так вообще морально готовился к серии постов, в которой сделать полноценную боевку аля Disciples. В целом простой прототип у меня уже готов, так что есть чего написать)

Вообщем конечно, ещё много чего надо разобрать для себя. Хочу 2D юнитов в 3D окружении, трехмерный фаербол он, как не крути смотрится круче чем двумерный. Ну и все одно тенюшки они всякие оставляют и тд. Но в 3D я полный нубас пока, ну хоть немножко подразобрался.
Я хотел пост запилить про MeshLibrary, но там никакого кода нету, а с анимашками делал пост, оно не надо никому, как я понял.

Но сегодня не будет никаких эффектов и тд. Я честно говоря запарился без конца для всяких тестов, прототипов и подобного придумывать и записывать хп да урон монстрам, да и надо мне уже завести все таблицы. А так же человек меня спросил, какой бэкграунд нужен, чтобы врываться геймдизайнером. Сходу у меня один ответ, надо перфектное знание Google Sheets или Excel, как минимум стремиться к нему. Ну и сразу мысль, а вот я то дурак вечно свои велосипеды горожу, даже начал свой велосипед изобретать, для редактирования JSON'ов на Godot хотел сделать. Сам советую и сам себя не слушаю, Братан то у меня такие таблички рисует и с графиками и с формулами, залюбуешься, не даром ведущий ГД уже лет 8) Ну и тоже захотелось, а заодно вечер посидел, по мануалам + Google, слепил кривой вариант)).

https://developers.google.com/apps-script/quickstart/custom-...
http://blog.pamelafox.org/2013/06/exporting-google-spreadshe...
вот тут много полезного подчерпнул, но её скрипт у меня не работает, я все выпилил и оставил только самый необходимый рабочий минимум. Ну и хотелось чтобы скриншотиком на один экран все влезло, много кода это зло)

Табличку можете заполнять как вам угодно, сверху наименование ключей будут, ну внизу понятно значения идут в ячейках. После того как кликнули редактор скриптов, вылезет следующее окошко, оно будет пустым, там только файл с расширением .gs будет.

Криво, косо, в целом чего тут объяснять, кто с JS или с AS3 сталкивался, проблем вообще не должно возникнуть, все очень простенько так-то. Разве что написано некрасиво, ну это косяк мой уже да. Я тут не про красоту, а про результат, главное что работает пример и можно пользоваться. KISS во всей его красе)

По нажатию будет такая картина

Ну и минимально необходимая вариативность.

Сейчас чтобы добавить и экспортировать новую таблицу, надо будет ручками дать ей имя и в скрипте тоже его прописать. Ну и никакой защиты от дураков тоже ещё пока не делал и не тестил, может где и на чем сломается, так что заполнять надо корректно. В файл тоже пока экспорта нету. Это все на перспективу.

На вопрос, а чего не установил какое-нибудь расширение, честно я немножко не доверяю тому что там может быть, а они все столько разрешений просят. Вдруг у меня будет суперсекретная таблица с очень важными данными. Ну и во-вторых честно говоря, было очень даже интересно покопаться и разобраться немножко. В перспективе скорее всего доработаю, чтобы было удобнее пользоваться, но это уже скорее чтобы из приложения напрямую можно было к таблице обращаться. Ладно там видно будет.

Сейчас не буду обещать, что скоро будет пост или, что вот ещё писечку доделаю и будет очень прикольный трехмерный фаербол с сочным шейдером и партиклами. Фаербол ещё не достаточно сочный, да и могу забухать снова) Так что будет по пошаговой боевке, а там как раз и пригодится красивый фаербол в конце)

Гитхаб я так и не завел.
https://docs.google.com/document/d/1HF_BPKNn982Khlcbb39lyc0i...
Так что в гуглдок кину, вдруг пригодится кому.
Спасибо за внимание.