How to create an HTML link?

Question

I have created a JSON file with various data:

[
  {
    "date": "17.06.",
    "event": "The Stoles gig",
    "url": "http://thestoles.com/"
  },
  {
    "date": "25.06.",
    "event": "The Editors release an EP",
    "url": "http://theeditors.com/"
  }
]

Everything is rendered correctly in the HTML file, except for the URL, which doesn't show as a link.

Here's my code:

$(document).ready(function() {  
    $.getJSON('feeds.json', function(data){
        $.each(data, function(i, item){
            $('#feeds').append(item['date'] + item['event'] + item['url'] + "</br>");
        });
    });
});

Any suggestions?

Answer 1

Just do this...

You need to put the link in an <a> tag...

$(document).ready(function() {  
$.getJSON('feeds.json', function(data){
    $.each(data, function(i, item){
        $('#feeds').append(item.date + item.event + "<a href='"+item.url+"'>"+item.url+"</a></br>");
    });
   });
 });

Or if you dont want to actually display the link, and just have the Event name hyperlinked...

$(document).ready(function() {  
 $.getJSON('feeds.json', function(data){
    $.each(data, function(i, item){
        $('#feeds').append(item.date + "<a href='"+item.url+"'>"+item.event+"</a></br>");
    });
   });
 });

Answer 2

You've to sourround the URL by an anchor-tag:

$(document).ready(function() {  
    $.getJSON('feeds.json', function(data){
        $.each(data, function(i, item){
            $('#feeds').append(item['date'] + item['event'] + '<a href="'+item['url']+'">Link</a></br>');
        });
    });
});