用于将json转换为html的简单jquery插件

Question

我需要将此json数据附加到html元素。

[
    {
        "website":"google",
        "link":"http://google.com"
    },
    {
        "website":"facebook",
        "link":"http://fb.com"
    }
]

如何使用任何插件轻松转换这个。目前，我在jquery中找不到任何简单的插件，所以请帮助我的朋友。

提前致谢..........

Answer 1

嗨，你可以使用jPut jQuery插件（ http://plugins.jquery.com/jput/ ）

创建一个HTML jPut模板

<div jput="template">
  <a href="{{link}}">{{website}}</a>
</div>
<div id="main">
</div>

<script>
$(document).ready(function(){
var json=[{"website":"google","link":"http://google.com"},
    {"website":"facebook","link":"http://fb.com"}];

   $('#main').jPut({
       jsonData:json,   //your json data
       name:'template'  //jPut template name
   });
});
</script>

Answer 2

与普通解析相比，jPut易于使用。 如果要附加大量数据，则很难使用$ .each循环追加。 在jPut中只需要创建模板并打印数据，只需将对象名称放在{{}}中即可。

Answer 3

使用jQuery，你可以这样做：

data = $.parseJson(json);

$.each(data, function(key, obj) {
    htmlElement = $('<a href="'+link+'">'+website+'</a>');
    $('body').append(htmlElement);
})

Answer 4

为什么要使用插件？ 无需编写插件来解决这个问题。 只需简单地循环并执行您不想要的数据。 这是一个例子：

var data = [
    {
        "website":"google",
        "link":"http://google.com"
    },
    {
        "website":"facebook",
        "link":"http://fb.com"
    }
];

var html = '';

$.each(data, function (index, item) {
    html += '<a href="' + item.link + '">' + item.website + '</a>';
});

$('body').append(html);

Answer 5

如果您希望它是锚标记，那么 -

Html -

<div id="siteContainer"></div>

JS-

var sites = [
    {
        "website":"google",
        "link":"http://google.com"
    },
    {
        "website":"facebook",
        "link":"http://fb.com"
    } 
]

var $container = $('siteContainer');

$(sites).each(function(item, index){
    var name = item['website'];
    var link = item['link'];
    var anchorTag = '<a href="' + link + '">' + name + '</a>');
    $container.appendTo(anchorTag);
});

Answer 6

不需要插件，只需使用each函数进行迭代，并使用任何selector标记附加锚标记。

var links = [
    {
        "website":"google",
        "link":"http://google.com"
    },
    {
        "website":"facebook",
        "link":"http://fb.com"
    }
];

$.each(links, function(index, object){
   $("<a></a>").attr("href", object.link).
       text( object.website).css("margin", "5px").appendTo("body");
})   

Answer 7

不需要插件 ，也可以在没有jquery的情况下完成

<div id="container">

</div>


<script>

var data = [
    {
        "website":"google",
        "link":"http://google.com"
    },
    {
        "website":"facebook",
        "link":"http://fb.com"
    }
]


document.getElementById('container').innerHTML = '<a href="'+data[0]['link']+'">'+data[0]['website']+'</a> >> '+data[0]['link']+' <br> <a href="'+data[1]['link']+'">'+data[1]['website']+'</a> >> '+data[1]['link']


</script>