Как создать html «элемент» из сложного объекта?

Question

[Губернатор]

Мне нужно создать html elemnt из сложного объекта, а кроме бомжатской createElement, ничего не нагуглилось.
Неужели в js, все так плохо?

Например, есть объект:

let doc =
{
  div
  {
    class:"block",
    height:"200px",
    span:
    {
      innerText:"text",
      style:
      {
        color:"red";
      }
    }
  }
}

Нужно получить:

<div class="block" height="200px">
    <span style="color:red">text</span>
  </div>

Есть решения?

Comments

[Сергей Сергей]

"Шаблонизаторы" могут из подобного собирать хтмл, но внутри именно createElement или innerHTML.

[Губернатор]

Сергей Сергей, Я хотел хранить документ в json виде, а далее генерить страницу из нее. Мне нужна просто функция, которая на клиенте соберет из json элемент и отобразит его.

[Сергей Сергей]

Гуглить "шаблонизатор". Можно найти целую библиотеку, а можно и функцию - как повезет. В конце концов, можно написать самому, при хорошем формате записи получится обойтись функцией строковой замены на регулярных выражениях.

[alexalexes]

А в чем проблема собрать свой велик, если тренируетесь в образовательных целях?
Обходим свойства объекта и по нему создаем теги.
Обходим свойства второго порядка - пичкаем тег атрибутами.
Если у элемента есть потомки, то рекурсивно вызываем свою функцию-велик - все как при обработке деревьев.

[Губернатор]

alexalexes, не силен в джс, боюсь на такой велик уйдет очень много времени. Просто поудивляюсь от тупости джс и пойду спать.

[Виталий Б]

Эмм, не совсем понял. Просвятите пожалуйста, а какой язык не "бомжатски" и не "тупо" распарсит json и построит элемент без использования шаблонизаторов или фреймворков?

[alexalexes]

Вам просто нужно почувствовать, как работать со структурой данных - деревья (создание, обход, вывод содержимого). Каким инструментом вы будете выводить теги - JS или даже C++, не важно. Это чисто академическая задача, студенты на первом курсе, обычно, развлекаются такой задачкой.

[Стас Хитрич]

Пожалуйста, не учите JavaScript, если такое кажется вам тупым...

[Губернатор]

Стас Хитрич, да я бы с радостью, только добавьте в браузеры поддержку другого языка.
Виталий Балахнин, а зачем другим языкам думать о создании Элементов, если они 25 лет подряд, не являются основным инструментом веб-клиентов?

[Виталий Б]

В смысле ваши коментарии думаю большинство поняли так. Человек хочет получить от голого ЯП, тот функционал, который обычно либо пишется самостоятельно, либо реализуется с помощью готовых плагинов/фреймворков. Js это же не "конструктор" для веба. Это а общем язык как и любой другой. Вы хотите получить функционал условно говоря "плагина" от голого ЯП.

[Стас Хитрич]

Губернатор, сколько бы языков вам не предоставили, Вы все равно столкнетесь с недостатком заготовленных методов. Если хотите готовые решения, пользуйтесь конструктором или нанимайте специалиста который понимает как "соединяя буквы, получить слова". А принижать словарь, за то, что в нем нет буквы которая сама по себе значит то что вам необходимо, как минимум странно

[Губернатор]

Стас Хитрич, Виталий Балахнин насчет бомжатско и тупого просвящаю,
- адекватная навигация по ДОМ и работа с узлами, которая "должна была реализоваться фреймоврками" была зачем-то добавлена в ес5, и уверен это благодаря jquery.
- оптимизация бомжатская, простое деление целых чисел в джс будет всегда использует дробное деление с доп. регистрами, которые в десятки раз медленней, и т.п. Для этого создали еще 1 костыль вебАсм который не джс.
- куча мусора от старых стандартов, который вытесняет новый (var, require, class) а старый все так и будет валятся
- и про тупость джс долго гуглить не нужно: https://progtask.ru/strannosti-javascript/ , https://habr.com/ru/company/mailru/blog/335292/ , https://habr.com/ru/post/215777/ , https://techrocks.ru/2020/04/15/weird-things-in-ja... , https://ruseller.com/lessons.php?rub_id=28&id=1385

это только то что мне известно
лучше скажи что в нем нормальное? )

[Виталий Б]

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

[Aetae]

Hello there, хейтер Губернатор.
>https://progtask.ru/strannosti-javascript/
1. Известный косяк, признанный автором языка который ни на что реально не влияет.
2. Обычно дело для чисел с плавающей точкой, тот же результат вы получите в 80% современных языков.
3. Обычно дело для языков без статической типизации. Любое приведение типов - это всегда компромиссы и всегда найдутся недовольные.
4. Не баг, а фича. Причём крайне удобная. Если в процессе вычислений что-то пошло не так, то с учётом того, что NaN не равен ничему, вероятность нежелательных эффектов снижается. Это часть изначальной парадигмы языка - максимальная свобода и максимальная толерантность к ошибкам в некритических(свистоперделки на сайтиках) частях. Сейчас язык стал от этого отходить, и у меня противоречивые чувства по этому поводу.
5. Всё те же ограничения вычислений, как и в 80% языков. Есть максимально безопасное число, после которого надо переходить на специальные либы для работы с большими числами(BigInt).
...и т.д. и т.п.

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

Answer 1

[Timur Kostenko]

Используй hyperscript

const doc = h(
  'div.block',
  {
    style: {
      height: '200px',
    },
  },
  h('span', 'text', {
    style: {
      color: 'red',
    },
  })
);

Answer 2

[Александр Таратин]

https://www.npmjs.com/package/from-json-to-html
https://www.npmjs.com/package/@codejockie/json-html

Answer 3

[xmoonlight]

element.js

Пример кода:

var html = elem("ul", {"id":"mylist"}, [
    elem("li", null, "Item 1"),
    elem("li", null, "Item 2"),
    elem("li", null, "Item 3"),
]);

Рендерит в:

<ul id="mylist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Также, есть превращение разметки в набор данных (в обратную сторону) через html2js.