javascript - 用jquery在html中格式化json

Question

我有 json 对象，我想将它作为 html 页面放入。

这是json：

[
    {
        "name":"Temoignage",
        "id":"2"
    },
    {
        "name":"Bien etre",
        "id":"3"
    },
    {
        "name":"paradis",
        "id":"5"
    },
    {
        "name":"guerir",
        "id":"6"
    },
    {
        "name":"energie",
        "id":"9"
    }
]

我想使用 append 函数把它放在一个 div 标签中，比如：

<div id="content">
<p><a href="id"> name </a></p>
<p><a href="id"> name </a></p>
<p><a href="id"> name </a></p>
.
.
.
</div>

注意： id 和 name 是我的 json 对象的条目。

Answer 1

var items="";
$.each(data,function(index,item){
    items+="<p><a href='"+item.id+"'>"+item.name+"</a></p>";
});
$("#content").html(items);

假设数据变量将具有JSON数据。

工作示例http://jsfiddle.net/Qq2e6/

当您使用 JSON 时， JsonLint是验证 JSON 的有用工具

Answer 2

使用遍历您的数组each并将每个项目附加到contentdiv 使用appendTo：

var json = [{"name":"Temoignage","id":"2"},{"name":"Bien etre","id":"3"},{"name":"paradis","id":"5"},{"name":"guerir","id":"6"},{"name":"energie","id":"9"}]​;

var $content = $("#content");
$.each(json, function () {
    $("<a>", { href: this.id }).text(this.name).appendTo($content).wrap("<p>");
});

​演示 。

Answer 3

作为替代方案，您也可以使用众多模板库之一。

这是一个使用Mustache.js的示例

小提琴：http: //jsfiddle.net/bboone/dCVwt/1

JS

var json = [{"name":"Temoignage","id":"2"},{"name":"Bien etre","id":"3"},{"name":"paradis","id":"5"},{"name":"guerir","id":"6"},{"name":"energie","id":"9"}]; 

$('#content').html(Mustache.render($('#template').html(), {items:json}));

HTML

<div id='content'></div>
<script type='text/html' id='template'>
    {{#items}}
        <p><a href="{{id}}">{{name}}</a></p>
    {{/items}}
</script>​

Answer 4

var jsArray; // Your JSON content into this variable

$.each(jsArray, function(i,e) {
   var $element = $("<p>").append($("<a>").attr('id', e.id).text(e.name)),
   $("#content").append($element);
});

<div id="content">

</div>

或者，我建议您为此学习 MVVM (Knockout.js)，它将您的层分开并使此过程更容易。