使用jquery格式json在html中

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" 
    } 
] 

我想使用附加功能來把這個像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> 

注：身份證和名字是我的JSON對象的條目。

Answer 1

遍歷您的陣列使用each並追加每個項目使用appendTo的content格：

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>"); 
}); 

DEMO。

Answer 2

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/

JsonLint是驗證JSON一個有用的工具，當你使用JSON工作

Answer 3

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）這樣的事情，它分離你的圖層，並使這個過程更容易。

Answer 4

作爲替代方案，您還可以使用其中的許多模板庫之一。

下面是使用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>​