How to a add link to JSON?

#json #html #webdev

In another edition to the JSON series, we can also add clickable links are part of the paragraph in the JSON. We can encapsulate the link in the anchor tag <a href='#'></a>. We can add the redirection link in the href so that the user can redirect to the link on click. This hack helps us in avoiding the creation of a separate variable just for the links.



<!DOCTYPE html>
<html>
<body>
<h2>JSON with clickable link</h2>
<span id="heading"></span><br/>
<span id="paragraph"></span>
<script>
const faq= {
 heading: "<b>Heading 1</b>", 
 paragraph: "This is a link to <a href='https://www.google.com'>Google</a>" 
 } 
document.getElementById("heading").innerHTML = faq.heading;
document.getElementById("paragraph").innerHTML = faq.paragraph;
</script>
</body>
</html>

Note: Make sure you use single inverted commas for the link otherwise the JSON will become invalid if we use double inverted commas inside double inverted commas.

The DOM identifies the HTML element in the JSON and converts the text encapsulated to the link. This will help you code your FAQs page better.

Happy Coding!

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started