Рендеринг JSON в HTML - PullRequest
       31

Рендеринг JSON в HTML

1 голос
/ 30 декабря 2010

просто быстрый вопрос, который, мы надеемся, будет направлен в правильном направлении.Я вступил во владение другим разработчиком, и я лечу рядом с моими (теперь порванными LOL!) Штанами.У меня есть веб-страница с включенным JSON, и мне просто нужно отобразить ее в HTML.Теперь о подробностях ... Я создаю страницу помощи (используя Catalyst / Template Toolkit и Dojo).Я преуспел достаточно, чтобы построить страницу с вкладками и в том числе кусок JSON.УРА!для меня (На самом деле, вы не представляете, как хорошо я себя чувствую за то, что могу делать только ЭТО!)Это больше вопрос о том, куда идти дальше, и любые указатели будут оценены.Лучше ли заставить додзё читать JSON и как-то записывать его в div?Любой намек на то, как бы я поступил об этом?Когда я гуглю «JSON to HTML», я получаю множество предложений по сторонним продуктам, и я еще не очень хорошо знаком с DOJO и, тем более, с AJAX.Любой совет будет принята с благодарностью ... Джени

Ответы [ 3 ]

1 голос
/ 30 декабря 2010

С Firebug: console.log('myVar: ', myVar);

Здесь функция JSON для строки: http://scriptnode.com/article/javascript-print_r-or-var_dump-equivalent/

1 голос
/ 30 декабря 2010

Эта страница из документации Dojo может быть полезна. Он ссылается на функцию библиотеки dojo.fromJson для преобразования строки текста в формате JSON в объект JavaScript. Затем вы можете получить доступ к свойствам объекта и вставить их с HTML в тег div.

0 голосов
/ 19 декабря 2015

Это можно улучшить, но надежда может помочь вам. https://jsfiddle.net/VixedS/vz9L4c83/

var object= {xHtml:[{'tag':'input','placeholder':'name:','size':12},{'tag':'br'},{'tag':'textarea','style':'color:#FFF;background:blue;','content':'Hello world '}]};

$.each(object.xHtml,function(key,val){
    var el=$('<'+this.tag+' />');
        $.each(this,function(key,val){
        console.log(key,val);
          if (!(key=='content') || !(key=='tag'))
             el.attr(key,val)
        });
    $('body').append(el.append(this.content))
})
...