CODEWITHSUNDEEP
javascriptjson
aurala20
aurala20

Reputation: 21

How to add the data from a JSON file in a mailto link?

I am an absolute beginner with JS, looking to solve the following problem:

Context:

I have a JSON file with personal data like name, email address, bio, etc. For my project, I need to create a simple web page with all this personal data nicely presented per each individual (loading my data using $.getJSON()). I have to use JS, html and css combined to format the page.

Problem:

How do I add a mailto link to each email address on my page? It should open the correct email address for each individual, as per my JSON file. Here is my code so far:

 var email = "<p>" + candidatesDataset.results[i].email+ "</p>"; 


var person =
  '<section class="row" id="person"><div class="four columns card">' +
  image + '</div><div class="eight columns card">'+
  name + 
  about +
  email +
  "</div></section>";

The code above only shows the email address as text, while I need it to be clickable. Could someone please explain how to do this?

Upvotes: 1

Views: 1011

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8118

Use HTML mailto attribute as follows: I am making using of ES6 template literals and Intepolation for better and easy syntax.

let email = `<p> <a href="mailto:${candidatesDataset.results[i].email}">Send Mail To ${candidatesDataset.results[i].email} </a> </p>`; 


let person =
  `<section class="row" id="person">
       <div class="four columns card">
         ${image}
       </div>
  
       <div class="eight columns card">
          ${name}   
          ${about}
          ${email} 
       </div>
   </section>`;

Upvotes: 1

Lka
Lka

Reputation: 430

Do you mean :

var email = "<p><a href='mailto:"+ candidatesDataset.results[i].email+"'>" + candidatesDataset.results[i].email+ "</a></p>";

Upvotes: 1

Related Questions