Tengo dos páginas html y quiero recuperar un objeto JSON cuando el usuario hace clic en el enlace de la primera página html. Los enlaces tienen ID diferentes cuando hago clic en el primer enlace en la primera página. Quiero obtener la primera información. El problema es cuál: cada enlace en el que hago clic muestra toda la información de los datos. Necesito una forma de resolverlo. Gracias de antemano
(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>Creo que esto podría resolver tu caso. Gracias a @Dula y @Peter Krebs (primera página)
<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>