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

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  id="person"><div >'  
  image   '</div><div >' 
  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?

CodePudding user response：

Do you mean :

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

CodePudding user response：

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  id="person">
       <div >
         ${image}
       </div>
  
       <div >
          ${name}   
          ${about}
          ${email} 
       </div>
   </section>`;