Javascript 如何检查URL参数是否作为JSON键存在，然后显示其值_Javascript_Html

Javascript 如何检查URL参数是否作为JSON键存在，然后显示其值

javascript html

Javascript 如何检查URL参数是否作为JSON键存在，然后显示其值,javascript,html,Javascript,Html,我有一个名为data.js的文件，其中包含一系列项目的JSON数据。目前，我的代码是静态的，没有使用这些数据如何使div动态生成，以便在JSON数据文件中有许多不同的项时仍然可以工作？通过这种方式，如果我转到URL并从项目的产品代码中键入一组参数，它们都会显示出来。示例：？qs=ABC+HJK 代码： .动态内容{ 显示：无； } 默认内容苹果橘子香蕉（函数（$）{ //解析URL参数函数getParameterByName（名称、url）{ 返回url？？location.hre

我有一个名为data.js的文件，其中包含一系列项目的JSON数据。目前，我的代码是静态的，没有使用这些数据

如何使div动态生成，以便在JSON数据文件中有许多不同的项时仍然可以工作？通过这种方式，如果我转到URL并从项目的产品代码中键入一组参数，它们都会显示出来。示例：

？qs=ABC+HJK

代码：


.动态内容{
显示：无；
}
默认内容
苹果
橘子
香蕉
（函数（$）{
//解析URL参数
函数getParameterByName（名称、url）{
返回url？？location.href.split（`？${name}=`）[1]；
}
$（文档）.ready（函数（）{
const keys=getParameterByName（'qs'）？.split（'+'）；
让动态内容；
//对于每个条目，检查它是否对应于div
如果（钥匙）
keys.forEach（key=>{
如果（键=='apples'）
dynamicContent=$（“#苹果”）；
如果为else（键=='oranges'）
dynamicContent=$（“#橙子”）；
否则，如果（键==‘香蕉’）
动态内容=$（“#香蕉”）；
if（动态内容）
dynamicContent.show（）；
});
//如果找不到元素，则显示默认元素
如果（！dynamicContent）
$（“#默认内容”）.show（）；
})
})（jQuery）；

我想用香草js试试这样的东西

示例js文件

objects.js

data = [
    {
        "productNumber":"123",
        "name":"Ex Item 1"
    },
    {
        "productNumber":"142",
        "name":"Ex Item 2"
    },
    {
        "productNumber":"153",
        "name":"Ex Item 3"
    },
    {
        "productNumber":"249",
        "name":"Ex Item 4"
    }
]

function makeDiv(prodNum, prodName){
    exampleDiv = `
            <div>
                <h3>${prodNum}</h3>
                <p>${prodName}</p>
            </div>
    `   
    return exampleDiv
}

const mainDiv = document.querySelector('#mainDiv')

data.forEach(element => {
    productDiv = document.createElement('div');
    productDiv.innerHTML = makeDiv(element.productNumber, element.name)
    mainDiv.appendChild(productDiv)
});

objects.js
数据=[
{
“产品编号”：“123”，
“名称”：“除第1项外”
},
{
“产品编号”：“142”，
“名称”：“除第2项外”
},
{
“产品编号”：“153”，
“名称”：“除第3项外”
},
{
“产品编号”：“249”，
“名称”：“除第4项外”
}
]
函数makeDiv（prodNum，prodName）{
示例div=`
${prodNum}
${prodName}
`   
返回示例div
}
const mainDiv=document.querySelector（“#mainDiv”）
data.forEach（元素=>{
productDiv=document.createElement（'div'）；
productDiv.innerHTML=makeDiv（element.productNumber，element.name）
mainDiv.appendChild（productDiv）
});

html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="mainDiv"></div>

    <script src="objects.js"></script>
</body>
</html>

index.html
文件

然后，您可以为生成的元素提供类和ID，您可以设置一个if来检查数据是否为空，并在html上设置一个div和默认内容，或者在js文件中设置默认值。嘿，谢谢，但是我当前拥有的URL功能会发生什么变化呢？我怎样才能做到，当我像以前一样在URL末尾键入参数时，这一次使用productCode，它将只列出这些产品？从查询字符串中检查您传递的参数，并从您拥有的任何源生成json，然后你就有了你想要显示的列表。谢谢你的快速回复。我仍然对如何检查objects.js文件中是否存在参数感到困惑

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="mainDiv"></div>

    <script src="objects.js"></script>
</body>
</html>