show product base on browser url

I want to show product dynamic base on browser link.
For example if
http://www.example.com?product=[data.productList.id] then show data.productList.text

expected results:
if http://www.example.com?product=62276197-6059-4c21-9b40-c5b1d277e85d then show Product 001
i have tried many method, i hope someone would help me thank you very much

my js is below :

const browserId = data.productList.id

if (window.location.href.contains('?product=' + browserId) > -1) {
    $('.test').append(productItemName(data.productList.id))
}
function productItemName(productName) {
    return data.productList.filter(product => product.id === productName)?.[0]?.id;
}

my data js is below:

var data = {
    productList: [
    {
        id: "62276197-6059-4c21-9b40-c5b1d277e85d",
        link: "javascript:void(0)",
        imgurl: "/img/upload/png/joyacart_000001_12032019.png",
        text: 'Product 001',
        price: '368.00',
        hitRate: '45472',
        goldMedal: false,
        newItem: true,
        newShop: true,
        freeDelivery: true,
        ShopId: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb'
        },
        {
        id: "4a074028-d72a-4954-a159-f41adeb5cc5b",
        link: "javascript:void(0)",
        imgurl: "/img/upload/png/joyacart_000002_12032019.png",
        text: 'Product 002',
        price: '99.00',
        hitRate: '25241',
        goldMedal: true,
        newItem: false,
        newShop: true,
        freeDelivery: true,
        ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
        }]
}

html is below:

<div class="test"></div>