I have two html pages and I want to retrieve a JSON object when the user clicks from the first html page link.Links have different Id's when I clicks first link on the first page I want to get the first information.The problem is which-ever link I click it shows all the information from data.I need a way to solve it.Thanks in advance
(1st html page)
<a href="2nd-page.html" id="one">info 1</a> <br><br>
<a href="2nd-page.html" id="two">info 2</a>
const data = [
{
id: "two",
h1: "this is test two",
p: "sum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC",
list: `
<li>dog</li>
<li>fox</li>
<li>cat</li>
`
},
{
id: "one",
h1: "this is a test one",
p: "Contrary to popular belief, Lorem Ipsum is not simply random text.",
list: `
<li>red</li>
<li>Blue</li>
<li>yellow</li>
`
}
]
document.getElementById("heading").innerHTML = `${data.map(function(unit){return unit.h1})}`
document.getElementById("paragraph").innerHTML = `${data.map(function(unit){return unit.p})}`
document.getElementById("list").innerHTML = `${data.map(function(unit){return unit.list})}`<!-- 2nd html page -->
<!DOCTYPE html>
<html>
<body>
<h2 id="heading"></h2>
<p id="paragraph"></p>
<ul id="list"></ul>
</body>
</html>I think this might solve your case. Thanks to @Dula and @Peter Krebs (1st page)
<a href="2nd-page.html?id=one" >info 1</a> <br><br>
<a href="2nd-page.html?id=two" >info 2</a>
const data = {
one: {
h1: "this is a test one",
p: "Contrary to popular belief, Lorem Ipsum is not simply random text.",
list: `
<li>red</li>
<li>Blue</li>
<li>yellow</li>
`
},
two: {
h1: "this is test two",
p: "sum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC",
list: `
<li>dog</li>
<li>fox</li>
<li>cat</li>
`
}
}
function get_parameter( parameter_name ){
let parameters = new URLSearchParams( window.location.search );
return parameters.get( parameter_name );
}
past_id = get_parameter("id")
unit = data[past_id]
document.getElementById("heading").innerHTML = unit.h1
document.getElementById("paragraph").innerHTML = unit.p
document.getElementById("list").innerHTML = unit.list<!DOCTYPE html>
<html>
<body>
<h2 id="heading"></h2>
<p id="paragraph"></p>
<ul id="list"></ul>
<script src="your js file path.js"></script>
</body>
</html>