Нарисовать вложенный объект, как в консоли Chrome, используя js в html ⇐ Javascript

[Anonymous]

У меня есть несколько объектов js, которые выглядят примерно так:

Код: Выделить всё

const ih_t = {
header : 0,
body: Array.from({ length: 18 }, () => ({
val: 0
}))
};

Я хотел бы отображать их на HTML-странице так же, как Google Chrome отображает объекты в своей консоли. Я думаю, что многие люди видели эту экспозицию; выглядит это так:

Сразу скажу, мне не нужны эти функции и слово «прототип». (Мои объекты не содержат функций.) Я хотел бы отображать только то, что я включил в объект. И нарисовать его в виде красивого html дерева на чистом js без каких-либо библиотек (как в инструментах разработки Chrome)
Идеально было бы поддерживать имена полей. Например, приведенная выше структура может быть такой:

Код: Выделить всё

верхний уровень содержит ih_t и имеет два дочерних элемента заголовок и тело

header содержит «заголовок» и значение, bode содержит «body» и массив

для каждого члена массива у нас есть отдельный дочерний элемент
возможно ли это?

Подробнее здесь: https://stackoverflow.com/questions/798 ... js-in-html