javascript - jqueryでjsonをhtmlにフォーマットする

Question

5月のページにhtmlとして入れたいjsonオブジェクトがあります。

ここにjsonがあります：

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

これを次のような div タグに追加するには、append 関数を使用します。

<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/

JsonLintは、JSON を扱うときに 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) を学習して、レイヤーを分離し、このプロセスを簡単にすることをお勧めします。