Javascript 基于浏览器url显示产品

我想显示基于浏览器链接的产品动态。例如，如果

http://www.example.com?product=[data.productList.id]

然后显示

data.productList.text

预期结果：如果然后显示产品001

我试过很多方法

我的js如下：

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

我的数据如下：

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'
        }]
}

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

html格式如下：

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'
        }]
}

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

---

您可以使用

searchParams.get（“产品”）获取
product
下的值

然后将其传递给函数以获取所需的文本

演示代码：

//您的json数据
风险值数据={
产品列表：[{
id:“62276197-6059-4c21-9b40-c5b1d277e85d”，
链接：“javascript:void（0）”，
imgurl:“/img/upload/png/joyacart_000001_12032019.png”，
文本：“产品001”，
价格：'368.00'，
hitRate:'45472'，
金牌：错，
newItem:true，
新闻商店：是的，
免费送货：没错，
店名：“5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb”
},
{
id:“4a074028-d72a-4954-a159-f41adeb5cc5b”，
链接：“javascript:void（0）”，
imgurl:“/img/upload/png/joyacart_000002_12032019.png”，
文字：‘产品002’，
价格：'99.00'，
hitRate:'25241'，
金牌：没错，
newItem:false，
新闻商店：是的，
免费送货：没错，
ShopId:'10eb4250-47d6-41ad-a429-f65e05836f26'
}
]
}
//你的网址
变量url_字符串=”http://www.example.com?product=62276197-6059-4c21-9b40-c5b1d277e85d”；
var url=新的url（url\u字符串）；
//获取产品参数值
var browserId=url.searchParams.get（“产品”）；
//检查id是否不为空
if（browserId！=null）{
//通行证
$（'.test'）.append（productItemName（browserId））
}
函数productItemName（productName）{
返回data.productList.filter（product=>product.id==productName）？[0]？.text；
}

---

在我的webconsole

productItemName

函数中，语法错误（表示此

？[0]？.text

）

试试这个

function productItemName(productName) {
    let result = data.productList.find((item) => item.id === productName);
    return result !== undefined ? result.text : "Not Found";
}

---

您好，url_字符串是硬代码，如果我更改为另一个产品id将不起作用。是的，演示我已经硬编码了。您只需要获得您的url，如

var url=window.location.href和其他一切将是一样的。尝试这样做，让我知道如果你面临任何错误。