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?

If you want a link, you have to create an anchor element (<a>). w3.org/TR/html4/struct/links.html (FYI, this has nothing to do with JSON, so I updated your question). — Felix Kling
– Felix Kling, Commented Jun 16, 2013 at 9:53
Jquery is very useful creating elements and adding them to the dom — Edorka
– Edorka, Commented Jun 16, 2013 at 9:57
a link is an element, you need to set your url in 'href' property of an '<a href='..'> text shown </a>' in that .append — user1299518
– user1299518, Commented Jun 16, 2013 at 9:59
Why the downvote a valid question, just one with an easy answer to non beginnners!!! This site annoys me sometimes — GriffLab
– GriffLab, Commented Jun 16, 2013 at 10:06

Mr. B. · Accepted Answer · 2013-06-16 09:58:01Z

1

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

answered Jun 16, 2013 at 9:58

Mr. B.

8,84516 gold badges76 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kylie Over a year ago

No problem, I always hate when people point out my syntax error and fix it for me....I enjoy finding it myself, so I assume others might wanna as well....:P

Kylie · Accepted Answer · 2013-06-16 10:14:44Z

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

edited Jun 16, 2013 at 10:14

answered Jun 16, 2013 at 9:56

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

2 Comments

Emad Rahnama Over a year ago

This is better answer than @Mr. Bombastic

Jack Over a year ago

hey guys, none of the above is working. If I hyperlink it inside the code the link just doesn't show at all

Collectives™ on Stack Overflow

How to create an HTML link?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related