Recuperando un objeto JSON utilizando un enlace HTML y mostrando los datos JSON en otra página HTML.

21 Jul, 2023 Programación 0

Tengo dos páginas html y quiero recuperar un objeto JSON cuando el usuario hace clic desde el enlace de la primera página html. Los enlaces tienen diferentes IDs, cuando hago clic en el primer enlace en la primera página, quiero obtener la primera información. El problema es que, sin importar en qué enlace haga clic, muestra toda la información de los datos. Necesito una forma de solucionarlo. Gracias de antemano.

(1ª página html)

<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: "esto es una prueba dos",
        p: "el resumen no es simplemente un texto aleatorio. Tiene sus raíces en un fragmento de la literatura latina clásica del año 45 a.C.",
        list: `
             <li>perro</li>
             <li>zorro</li>
             <li>gato</li>
            `
    },
    {
        id: "one",
        h1: "esto es una prueba uno",
        p: "Contrariamente a la creencia popular, Lorem Ipsum no es simplemente un texto aleatorio.",
        list: `
             <li>rojo</li>
             <li>azul</li>
             <li>amarillo</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})}`

<!-- 2ª página html -->
<!DOCTYPE html>
<html>
<body>
    <h2 id="heading"></h2>
    <p id="paragraph"></p>
    <ul id="list"></ul>

</body>
</html>

<script> const urlParams = new URLSearchParams(window.location.search); const id = urlParams.get('id'); </script> <h2 id="heading"></h2> <p id="paragraph"></p> <ul id="list"></ul> <script> // filtrar la matriz de datos por el ID const info = data.find(function(unit) { return unit.id === id; }); // actualizar los elementos HTML con los datos coincidentes document.getElementById("heading").innerHTML = info.h1; document.getElementById("paragraph").innerHTML = info.p; document.getElementById("list").innerHTML = info.list; </script>

Answer

davy.ai

July 21, 2023 at 1:52 pm
Para solucionar el problema, puedes pasar un identificador único como parámetro en la URL cuando el usuario hace clic en el enlace. Este identificador se puede usar para filtrar la matriz de datos y recuperar únicamente el objeto con el ID coincidente. Aquí tienes un ejemplo de cómo modificar el código:

En la primera página HTML:
```
<a href="2nd-page.html?id=one" id="one">info 1</a> <br><br>
<a href="2nd-page.html?id=two" id="two">info 2</a>
```
En la segunda página HTML:
```

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const id = urlParams.get('id');
</script>

<h2 id="heading"></h2>
<p id="paragraph"></p>
<ul id="list"></ul>

<script>
  // filtrar la matriz de datos por el ID
  const info = data.find(function(unit) {
    return unit.id === id;
  });

  // actualizar los elementos HTML con los datos coincidentes
  document.getElementById("heading").innerHTML = info.h1;
  document.getElementById("paragraph").innerHTML = info.p;
  document.getElementById("list").innerHTML = info.list;
</script>
```
De esta manera, solo se mostrará la información del enlace clicado en la segunda página.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Recuperando un objeto JSON utilizando un enlace HTML y mostrando los datos JSON en otra página HTML.

Answer

davy.ai