Получение и сопоставление JSON только с помощью HTML

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

В HTML есть разные элементы, отвечающие за представление разных ресурсов, например <img>, <a>, <script>, <link>. Некоторые из них извлекают некоторые ресурсы или данные с сервера, в то время как другие могут просто указывать или ссылаться на некоторые ресурсы.

Например, с помощью <img> вы можете загружать изображения и представлять их пользователю:

<img src="/../../path/to/image.png">

Я всегда чувствовал, что мы можем сделать то же самое для более сложных типов ресурсов, таких как, например, JSON. Довольно часто нам просто нужно получить некоторые данные в формате JSON и сопоставить их с некоторым шаблоном HTML. Вы можете добиться этого, извлекая данные с помощью AJAX в JavaScript и создавая элементы с сопоставленными данными из ответа. Или вы можете использовать серверный рендеринг, который объединяет и генерирует HTML с сопоставленными данными.

Представьте, что у вас нет контроля над сервером, например, когда вам нужно получить данные из стороннего сервиса или внешнего API. В таких случаях вы можете не захотеть создавать прокси на своем сервере или привносить в свой проект интерфейсный фреймворк с десятками зависимостей. Кроме того, повторное написание одних и тех же запросов AJAX в JavaScript может быть утомительным.

Дело не в том, что я против рендеринга на стороне сервера или JavaScript (который, на мой взгляд, является лучшим языком сценариев). Скорее, я считаю, что мы должны стремиться к простоте. HTML — отличный способ добиться этой простоты.

В качестве примера рассмотрим открытый API, такой как restcountries.com. Если мы сделаем запрос на этот URL — https://restcountries.com/v3.1/name/cyprus — мы получим ответ в формате JSON:

[
   {
      "name":{
         "common":"Cyprus",
         "official":"Republic of Cyprus",
         "nativeName":{
            "ell":{
               "official":"Δημοκρατία της Κύπρος",
               "common":"Κύπρος"
            },
            "tur":{
               "official":"Kıbrıs Cumhuriyeti",
               "common":"Kıbrıs"
            }
         }
      },
      "currencies":{
         "EUR":{
            "name":"Euro",
            "symbol":"€"
         }
      },
      ...
      "capital":[
         "Nicosia"
      ],
      "region":"Europe",
      "subregion":"Southern Europe",
      "languages":{
         "ell":"Greek",
         "tur":"Turkish"
      },
      "population":1207361,
      "timezones":[
         "UTC+02:00"
      ],
      "continents":[
         "Europe"
      ],
      "flags":{
         "png":"https://flagcdn.com/w320/cy.png",
         "svg":"https://flagcdn.com/cy.svg",
         "alt":"The flag of Cyprus has a white field, at the center of which is a copper-colored silhouette of the Island of Cyprus above two green olive branches crossed at the stem."
      }
   }
]

Представьте, если бы мы могли сделать что-то вроде этого:

<template is="e-json" data-src="https://restcountries.com/v3.1/name/cyprus" data-object-name="response">
  <h3>Information about <span data-text="${response.body[0].name.official}:"></span></h3>
  <p>
    <span>Capital is </span><b data-text="${response.body[0].capital[0]}"></b><br>
    <span>Localted in </span><b data-text="${response.body[0].continents[0]}"></b><br>
    <span>Localted more specifically in </span><b data-text="${response.body[0].subregion}"></b><br>
    <span>Flag looks like </span><img class="flag" src="${response.body[0].flags.svg}"><br>
    <span>Timezones are </span><b data-text="${response.body[0].timezones.join(', ')}"></b><br>
    <span>Population is </span><b data-text="${response.body[0].population}"></b><br>
    <span>Languages are </span><b data-text="${Object.values(response.body[0].languages).join(', ')}"></b><br>
    <span>Currencies are </span><b data-text="${Object.keys(response.body[0].currencies).join(', ')}"></b><br>
  </p>
</template>

С небольшим количеством CSS страница может выглядеть так:

У меня для вас хорошие новости — вы можете это сделать, и не только. EHTML предоставляет настраиваемые элементы, которые вы можете поместить на HTML-страницу для различных целей и вариантов использования. Основная идея и цель этой библиотеки — предоставить удобный способ избавиться от кода JavaScript на стороне клиента, насколько это возможно для базовых и рутинных вещей.

Как видите, просто объявив тег template с индикатором e-json и некоторыми атрибутами, где вы указываете источник JSON и имя объекта отображения, вы можете вытащить JSON и отобразить его внутри шаблона через атрибут data-text, где вы также можете применять функции для структур данных. . EHTML также позволяет зацикливать объекты, ставить условия и многое другое.

Источник: https://guseyn.com/html/posts/fetch-json-with-ehtml.html

Рекомендации

• Полный пример
• ЭНТМЛ