javascript - 如何优雅的把JSON转换成HTML标签？

Question

比如这样的JSON数据：

{
    "title":"xxx",
    "context":"demodemodemo",
    "author":"ringotc" 
}

要转换成：

<p class="post">
    <h1>xxx</h1>
    <p class="context">
        demodemodemo
    </p>
    <p>Author：ringotc</p>
</p>

如何把JSON数据优雅的（可移植性、简约、明了）的转换成HTML标签？

Answer 1

https://github.com/moappi/json2html
看看这个是否适合你。

Answer 2

Tempo ( http://twigkit.github.io/tempo/ )

Answer 3

还可以使用mustache+jquery：
http://mustache.github.io/

"results":{
    "title":"xxx",
    "context":"demodemodemo",
    "author":"ringotc" 
}

$.ajax({
        type:"POST",
        url:"/app/info",
        success:function(data){
             var template='{{#results}}<p class="post"><h1>{{title}}</h1><p class="context">{{context}}</p><p>{{author}}</p></p>{{/results}}'; //result是你的json数据游标
             var html=Mustache.render(template,data);
             $("#info").html(html);
        },
        dataType:"json"
    });

Answer 4

jQuery 或者 JSLite.io 简单快速的实现

jsvar json ={
    "title":"xxx",
    "context":"demodemodemo",
    "author":"ringotc" 
}


$('

<p class="post"> <h1>'+json.title+'</h1> <p class="context">'+json.context+'</p> <p>'+json.author+'</p> </p>

').append('body')