Simple jquery plugin for converting json to html

Question

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

[
    {
        "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.

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

Answer 1

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

Create a HTML jPut Template

<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 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 {{}}.

Answer 3

With jQuery, you could do something like this:

data = $.parseJson(json);

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

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

Answer 5

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

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

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

Answer 7

no plugin needed, can be done without jquery too

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