How Transmit information from one page to another thanks to the parameters contained in the url

[devastud]

Hello,
I want Transmit information from one page to another thanks to the parameters contained in the url. I know I have to do a feth on each page.
Thank you very much

const collection = document.getElementById("productList")
fetch('http://localhost:3000/api/teddy') 
.then(response => response.json())
 .then(data => {
for (let prod of data) { 
   productList.innerHTML += `
 <div>
<a href="./produit.html?${product._id}">
<div>
<img src='${prod.imageUrl}' alt='' /> 
 <div class="card-body">
 <h2 class="title">${prod.name}</h2>
  <p class="text">${prod.price}</p>
 </div> </a>
        </div>
      `; 
    }
  }

      

  );

On my page product :

let product = document.getElementsByClassName ("option")
fetch('http://localhost:3000/api/cameras/${product._id}')
.then(response => response.json())
  .then(data => {

    for (let product of data) {

     option.textContent += `
     ${product.lenses}
  `; 
      
    }
  }
  
  
  
  );

[lasjorg]

You can use URLSearchParams and window.location.search

Example

First page link:

<a href="./second.html?product=coffee&productId=abc123">Coffee</a>

Second page JS

const params = new URLSearchParams(window.location.search);

const product = params.get('product');
const productId = params.get('productId');

Just be mindful about what you encode into the URL and how you use it. You can’t trust user input and the URL can be altered.

[devastud]

Thank you for your help.

I will try to concatenate the code including fetch so that the article data is displayed. I will read more about URLSearchParams and window.location.search.

[lasjorg]

Replace the route parameter :_id with the id you got from the URL. Use a template string.

`http://localhost:3000/api/cameras/${id}`

Express routing

---

Example

<a href="./second.html?postId=1">Post 1</a>


const params = new URLSearchParams(window.location.search);

const postId = params.get('postId');

fetch(`https://jsonplaceholder.typicode.com/comments?postId=${postId}`)
  .then((res) => res.json())
  .then((posts) => console.log(posts));