JSON в виде раскрывающегося иерархического вложеного списка

@marketarea · Регистрация: 11.06.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте, я использую:

JavaScript
1
JSON.stringify(event, null, 0)

и получаю JSON строку.

Мне нужно отображать полученные данные на HTML странице в виде раскрывающегося иерархического вложеного списка.

Тоесть сначала пользователь видет обект, кликнув на него отображается вложеная група и свойства, кликнув на групу видит еще групу и свойства(если група/свойства есть) и тд.

Как это сделать?

@diadiavova · 18.09.2018, 21:42

https://github.com/overtrue/json-viewer
https://github.com/mohsen1/json-formatter-js
https://www.jqueryscript.net/t... %20viewer/
Это первые три ссылки, которые выдает гугл на запрос json viewer js

Qwerty_Wasd · 18.09.2018, 21:59

Не по теме:

diadiavova, вторая ничего такая - благодарю :)

@marketarea · 19.09.2018, 12:04 **[ТС]**

Извините за мою тупость, но, я добавил на свою HTML страницу:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://cdn.jsdelivr.net/npm/json-formatter-js@2.2.1/dist/json-formatter.min.js"></script>
    <script>
        $(function () {
            var socket = io();
 
            socket.on('stream', function(data) {
                // $('#container').text(data);
                const formatter = new JSONFormatter(data);
                $( "<p>" + formatter.render(data) + "</p>" ).prependTo( "#container" );
            });
 
        });
    </script>

но в ответ получаю:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
Uncaught ReferenceError: module is not defined
    at json-formatter.js:1
23(index):21 Uncaught ReferenceError: JSONFormatter is not defined
    at r.<anonymous> ((index):21)
    at r.emit (index.js:83)
    at r.onevent (index.js:83)
    at r.onpacket (index.js:83)
    at r.<anonymous> (index.js:83)
    at r.emit (index.js:83)
    at r.ondecoded (index.js:83)
    at a.<anonymous> (index.js:83)
    at a.r.emit (index.js:83)
    at a.add (index.js:83)

Что не так делаю?
Спасибо!

Добавлено через 28 минут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://cdn.jsdelivr.net/npm/json-formatter-js@2.2.1/dist/json-formatter.min.js"></script>
    <script>
        $(function () {
            var socket = io();
 
            socket.on('stream', function(data) {
                // $('#container').text(data);
                import JSONFormatter from 'json-formatter-js'
                const myJSON = data;
                const formatter = new JSONFormatter(myJSON);
                $( "<p>" + formatter + "</p>" ).prependTo( "#container" );
            });
 
        });
    </script>

HTML5
1
2
3
4
json-formatter.js:1 Uncaught ReferenceError: module is not defined
    at json-formatter.js:1
(anonymous) @ json-formatter.js:1
(index):21 Uncaught SyntaxError: Unexpected identifier

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@diadiavova 7258 / 2605 / 744 Регистрация: 11.04.2015 Сообщений: 4,149 Записей в блоге: 43
	18.09.2018, 21:42
	Сообщение было отмечено marketarea как решение Решение https://github.com/overtrue/json-viewer https://github.com/mohsen1/json-formatter-js https://www.jqueryscript.net/t... %20viewer/ Это первые три ссылки, которые выдает гугл на запрос `json viewer js` 1

Qwerty_Wasd
	18.09.2018, 21:59
	Не по теме: diadiavova, вторая ничего такая - благодарю :) 0

JSON в виде раскрывающегося иерархического вложеного списка

Решение