How to pass JSON Object key-value pair into HTML href tag?

Question

Beginner to Javascript & HTML here, I'm trying to search up how to pass an object from a JSON file into a HTML file and use a key value pair in a link's HREF tag. I'll try my best to illustrate below

JSON FILE:

{
   "apple" : "https://www.apple.com",
   "orange" : "https://www.orange.com"
}

INTENDED HTML FILE:

<!DOCTYPE html>
<body>
    <link href={apple}>     //ideally the json object brought in and key value pair gives us href="https://www.apple.com
</body>
</html>

How can I do this? Thank you!

You can't do this without using client-side JavaScript or server-side template engine. — Tsvetan Ganev, Jun 29 '20 at 06:56

score 0 · Answer 1 · answered Jun 29 '20 at 07:01

assign that to a variable then you can access the values:

var data = {
   "apple" : "https://www.apple.com",
   "orange" : "https://www.orange.com"
}

<!DOCTYPE html>
<body>
    <link id="link">     //ideally the json object brought in and key value pair gives us href="https://www.apple.com
</body>
</html>

in you js assign the variable:

var link = document.getElementById("link");
link.setAttribute("href", data.apple);

score 0 · Answer 2 · answered Jun 29 '20 at 07:06

I hope you have json object in client side. Below code might help you

<link id = "test" href="">     

<script>
var txt = '{"apple":"www.google.com", "orange":"www.google.come"}'
var obj = JSON.parse(txt);
var a = document.getElementById('test'); 
a.href = obj.apple
</script>

Espen · Answer 3 · 2020-06-29T11:06:46.040

With plain Javascript, you can loop over the object properties and do a find replace on your HTML document, then replace the HTML text in that document after the replacing. Why you are using a < link > element in the body, I do not get, so I changed it to an anchor tag instead in my example. Also to load the JSON data from a file, use the fetch API.fetch API

See this StackOverflow post for more info on how to use fetch: How to read JSON with fetch

function replaceTemplateStrings(data){
  let text = document.documentElement.innerHTML;

  for(key in data){
    text = text.replace(`{${key}}`, obj[key]);
    text = text.replace(`{${key}key}`, key);
  }

  document.documentElement.innerHTML = text;
}


let obj = {
   "apple" : "https://www.apple.com",
   "orange" : "https://www.orange.com"
};

replaceTemplateStrings(obj);

// to load the JSON from file, use fetch() instead of inline object.

<H1>List</H1>
<a href="{apple}">{applekey}</a>

score 0 · Answer 4 · answered Mar 09 '21 at 06:51

for in loops that others have suggested should be avoided, because they do not always work as you expect them to. There are a lot of places you can find out in which ways. I will not mention them here, because it has been discussed and written about on this and a plethora of other sites. I will however show a different solution to your problem.

const data = {
  "apple": "http://apple.com",
  "orange": "http://orange.com"
};

function format() {
  let links = document.getElementsByTagName("a");
  for (link of links) {
    let name = link.getAttribute("href").replace("{", "").replace("}", "");
    console.log(name);
    link.href = data[name];
    link.innerText = name;
  }
}

format();

<div>
  <a href="{apple}">{name}</a>
  <a href="{orange}">{name}</a>
</div>

How to pass JSON Object key-value pair into HTML href tag?

4 Answers4