Как правильно создать html разметку из json?

Question

[SvetlanaDubovik]

Здравствуйте. Подскажите, пожалуйста. Нужно вывести данные из json-файла в html. JSON примерно такого формата:

{"@attributes":{"class":"row small-padding","id":"block3"},"p":"Президент","a":["Дубовсков Андрей Анатольевич",{"@attributes":{"href":"#"},"i":{"@attributes":{"class":"fa fa-search text-default-light fa-hover"}}}],"div":{"@attributes":{"class":"row"},"div":[{"@attributes":{"class":"col-xs-3"},"p":"01.01.2001"},{"@attributes":{"class":"col-xs-1"},"p":"ИНН 0000000"}]}}

Я JS изучаю недавно и своими мозгами дойти пока не получается.

Answer 1

[Alexander Pushkarev]

Структура json имеет разную структур элементов. Все элементы нужно подвести под один стандарт. А после этого уже выводить их.

Comments

[SvetlanaDubovik]

Если так сделать

{
            "type": "p",       
            "p": ["Пезидент", "2007-04-13", "782506133697"],
            "a": ["1.html", "Дубовсков Андрей Анатольевич"],
            "a": ["1.html", "Дубовсков Андрей Анатольевич"]
        }

Просто данные берутся с бэкенда, простым конвертированием xml-разметки в JSON. Потому и получается такая абра-кадабра. И на до из нее как-то вычленить нужные данные и вывести их пользователю

[Alexander Pushkarev]

SvetlanaDubovik: дак не делайте просто конвертацию, а преобразуйте данные в нужный формат

[SvetlanaDubovik]

Не я бэкендом занимаюсь. А как должны выглядеть данные ?

[Alexander Pushkarev]

SvetlanaDubovik: Ну примерно так

[
    [
        'element'       => 'div',
        'attributes'    => [
            'class' => 'row small-padding',
            'id'    => 'block3'
        ],
        'content'       => [
            'element'   => 'p',
            'content'   => 'lorem'
        ],
    ]
];

[SvetlanaDubovik]

И это обрабатывать все в цикле? На каждую вложенность получается, нужно будет также свой цикл запускать?

[Alexander Pushkarev]

SvetlanaDubovik: через рекурсию. Можете рендерить на сервере и отдавать уже готовый html

[SvetlanaDubovik]

Alexander Pushkarev: А если вложенность большая, рекурсия не сильно долго будет обрабатывать?

[Alexander Pushkarev]

SvetlanaDubovik: смотря какая вложенность. Я думаю вам нужен bemHTML

Answer 2

[sergski]

У вас будет именно этот json?
Преобразуйте в строку в формат JSON с помощью JSON.stringify, потом преобразуйте в объект с помощью JSON.parse и выбирайте из него нужные значения. Далее выводите значение на страницу.

Comments

[SvetlanaDubovik]

извините, но у меня как раз проблема в выборе значений из объекта. У меня несколько аналогичных JSON, но с немного разной вложенностью. и я не понимаю, как мне вычленить только те данные, которые мне нужны. ведь свойства у разных объектов (из разных json) будут по-разному называться. В общем, я в тупике.

[sergski]

SvetlanaDubovik: поставьте условие для каждого свойства и выводите.
Для вашего примера, например, так (откройте консоль, там увидите все значения).