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

I need to append this json data to an html element.

我需要将这个json数据附加到一个html元素。

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

How to convert this easily using any plugin.Presently,I couldn't find any simple plugins in jquery,So please help me friends.

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

Thanks in advance..........

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

7 个解决方案

#1

Hi you can use jPut jQuery Plugin (http://plugins.jquery.com/jput/)

你好，你可以使用jPut jQuery插件(http://plugins.jquery.com/jput/)

Create a HTML jPut Template

创建一个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>

#2

jPut is easy to use comparing to normal parsing. if there is lots of data to be appended it is very difficult to append using $.each loop. in jPut just need to create template & to print the data just put the object name in {{}}.

与常规解析相比，jPut很容易使用。如果要附加大量的数据，那么使用$来附加是非常困难的。每一个循环。在jPut中，只需创建模板&打印数据，只需将对象名放在{{}中。

#3

With jQuery, you could do something like this:

使用jQuery，您可以做以下事情:

data = $.parseJson(json);

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

#4

Why use a plugin for this? No need to write a plugin to go around this. Just simply loop it through & do what you wan't with the data. Here is an example:

为什么要使用插件呢?不需要编写插件来解决这个问题。只需循环它，并做你不需要的数据。这是一个例子:

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

#5

If you're expecting it to be an anchor tag then -

如果你期望它是一个锚标记那么

Html -

Html—

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

JS-

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

#6

NO need plugin, simply iterate with each function and append anchor tag with any selector tag.

无需插件，只需对每个函数进行迭代，并使用任何选择器标记附加锚标记。

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

#7

no plugin needed, can be done without jquery too

不需要任何插件，也可以在没有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>

#1