making json data a clickable link in html-ThrowExceptions

Exception or error:

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": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Eladio Beier",
          "email": "Lavonne.Kiehn@hotmail.com"
        },
        {
          "name": "Hilton Borer",
          "email": "Reva.Goyette@yahoo.com"
        }
    ]
}

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);
    });
});
How to solve:

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

###

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

Leave a Reply

Your email address will not be published. Required fields are marked *