Как записать json объект в тег?

Question

[Alex_87]

Доброго всем дня! Прошу помочь мне в следующем вопросе. Я получаю объект JSON id output. НО, я вижу объект только в браузере. Как сделать так, чтобы он был в самом теге - физически!!!
Сейчас он выводится в Id output, но в самой разметке пусто.
<pre id="output"></pre>
https://codepen.io/Alexei_87/pen/ZEEPEaz

P.S. Прошу прощения, что не отредактировано нормально в codepen. Я не знаю, как это делать

Comments

[2CHEVSKII]

innerHTML?

[Alex_87]

Pavel Kuzyakin, Чтобы то, что выводится в браузер, выводилось в тег output

грубо говоря так
<pre id="output">"lastTo":"","last":"","name":"Алексей","type":"Report Type","url":"http://sailero.com/","exurl":"","data":"234234","ipv4":"","country_code":"","group_code":"","online":"","Web":"on","Has":"on"</pre>

[Pavel Kuzyakin]

Alex_87, так все у вас выводится

[Alex_87]

Pavel Kuzyakin, Это я в качестве примера, как должно быть, скопировал json объект с браузера и вставил его в тег)

[Pavel Kuzyakin]

Alex_87, нет, это я на кодепене нажал кнопку Submit и он отобразился, согласно коду.

[Alex_87]

Pavel Kuzyakin, Отображается в браузере? Прекрасно) А как трансформировать это в разметке html?

[Pavel Kuzyakin]

Alex_87, как написал в ответе — использовать рендеринг на стороне сервера, хоть и не совсем понятно, зачем вам это

[Alex_87]

Pavel Kuzyakin, Привожу вам в пример библиотеку, которая этим занимается: json2html.com/docs/#main-attributes-tag
Единственное, мне не понятно, почему он у меня ругается?
Беру код с этого сайта:

let data = [
    {"text":"<read this as text>"},
    {"text":"><img onerror='alert(0);'>"}
];
 
let transform = {'<>':'div','text':'${text}'};

И у меня выдаёт ошибку: ERROR in Template execution failed: ReferenceError: text is not defined
Почему!? В чём может быть проблема?

[Pavel Kuzyakin]

Alex_87, судя по ошибке, вы не объявили переменную text

[Alex_87]

Pavel Kuzyakin, вы можете помочь мне вывести в div json объект, используя мой код выше с данной библиотекой( json2html.com)? У меня что-то не получается....

[Pavel Kuzyakin]

Alex_87, посмотрел на эту библиотеку, там обычный document.write используется. вы уверены, что вам это нужно?

[Alex_87]

Pavel Kuzyakin, там не только он выводиться. Я тоже видел этот кусок кода, на который вы указываете... Да, мне это нужно! Я не знаю, как можно сделать по другому. Мне такой вариант, кажется нормальным!

[Pavel Kuzyakin]

Alex_87, давайте по порядку. вам необходимо, чтобы был заполнен сразу в коде страницы, так? для этого нужно собрать все данные формы, отправить их на сервер, получить ответ и отрисовать его в нужном месте. соответственно, сначала нужно этот сервер поднять, json2html тут вообще не при чем.

[Alex_87]

Pavel Kuzyakin, Да не нужно никуда отправлять. json уже присутствует на стороне клиента. Его просто осталось трансформировать в html

[Alex_87]

Pavel Kuzyakin, Добрый вечер! Я прошу ответить мне, если вы здесь! Я был немного не прав по поводу разметки. Её конечно можно увидеть, но не в файле, а в самом браузере, при просмотре кода. У меня почти получилось выполнить задание, но я не совсем понимаю, как увеличить вывод из json большего количество значении.

$('ul').json2html(json,{'<>':'li','html':'${lastTo}'});

Сейчас, могу вывести только одно(lastTo). Но у меня разумеется их больше:

Логично, чтобы это было так: $('ul').json2html(json,{'<>':'li','html':'${lastTo}', 'html' : '${last}'});
Но в этом случае, он просто выводит последнее значение: '${last}'

Answer 1

[Pavel Kuzyakin]

> НО, я вижу объект только в браузере. Как сделать так, чтобы он был в самом теге - физически!!!

разумеется вы видите его только в браузере, это же JavaScript. чтобы он был в самом теге физически — используйте любой серверный ЯП и делайте все на сервере.