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

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}
  `; 
      
    }
  }
  
  
  
  );

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.

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.

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

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

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));

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.