CODEWITHSUNDEEP
htmljsonhyperlinkstyles
Rebekah
Rebekah

Reputation: 77

making json data a clickable link in html

I have json data which is displayed on an html page javascript, I was wondering if there was a way to make this information clickable like a link. Anyone know how this would be done?

Here is my json, I want to pick up each name from the json file and make it clickable.

{
    "example": [
        {
          "name": "Dr. Sammie Boyer",
          "email": "[email protected]"
        },
        {
          "name": "Eladio Beier",
          "email": "[email protected]"
        },
        {
          "name": "Hilton Borer",
          "email": "[email protected]"
        }
    ]
}

Code I tried 

$(document).ready(function() {


    $.getJSON('example.json', function(data) {
         var output = '';
         $.each(data.name, function(key, value) {
                output += '<a href=' + value.name + '</a>';
        });
       
        $('#user').html(output);
    });
});

Upvotes: 0

Views: 13675

Answers (2)

Soaad
Soaad

Reputation: 112

just replace emailto with mailto to be like this

$.getJSON('example.json', function(data) {
      var output = '';
      $.each(data.name, function(key, value) {
            output += '<a href="mailto:' + value.email + '">'  + value.name + '</a>';
    });

    $('#user').html(output);
});

Upvotes: 0

Simo Mafuxwana
Simo Mafuxwana

Reputation: 3762

Try this (updated) - Set the value of the href as you loop

$.getJSON('example.json', function(data) {
      var output = '';
      $.each(data.name, function(key, value) {
            output += '<a href="emailto:' + value.email + '">'  + value.name + '</a>';
    });

    $('#user').html(output);
});

Upvotes: 2

Related Questions