Javascript 通过单击另一个页面上的元素，在一个页面中加载特定的JSON数据_Javascript_Jquery_Html_Json_Frontend

Javascript 通过单击另一个页面上的元素，在一个页面中加载特定的JSON数据

javascript jquery html json

Javascript 通过单击另一个页面上的元素，在一个页面中加载特定的JSON数据,javascript,jquery,html,json,frontend,Javascript,Jquery,Html,Json,Frontend,我想通过单击另一个HTML页面上的按钮，仅使用jQuery和纯JS，将特定数据从JSON加载到特定的HTML页面。例如：第一个HTML页面，首先我需要在id=“products”的元素中显示JSON中的所有产品：感谢您的帮助，我需要这个用于学校项目，这就是为什么我只能使用JS和JSON。由于浏览器安全问题，如果JSON文件是托管文件（http/https），您只能从该文件中读取，因此这不适用于本地运行的“file://”内容第一个函数下载json文件，然后将其转换为javascript数

我想通过单击另一个HTML页面上的按钮，仅使用jQuery和纯JS，将特定数据从JSON加载到特定的HTML页面。例如：

第一个HTML页面，首先我需要在id=“products”的元素中显示JSON中的所有产品：

感谢您的帮助，我需要这个用于学校项目，这就是为什么我只能使用JS和JSON。

由于浏览器安全问题，如果JSON文件是托管文件（http/https），您只能从该文件中读取，因此这不适用于本地运行的“file://”内容

第一个函数下载json文件，然后将其转换为javascript数据结构，然后将其交给第二个函数，后者构建适当的内容并将其添加到页面中

const getPage=whichPage=>{
返回fetch（“path/to/yourfile.json”）
.then（response=>response.json（））
.然后（数据=>buildPage（whichPage，数据））
.catch（error=>console.error（error））；
};
const buildPage=（哪个页面，产品）=>{
如果（其页面==“产品”）{
//对产品执行某些操作以显示产品列表
products.forEach（p=>console.log（p））；
}否则{
让product=products.find（p=>p.name==whichPage）；
if（产品）{
//对产品执行某些操作以显示详细信息
控制台日志（产品）；
}否则{
console.错误（“未找到产品[“+whichPage+”]）；
}
}
};
getPage（“产品”）；
//或
//getPage（“华硕”）；
//或
//getPage（“产品”）。然后（（）=>getPage（“华硕”）请编辑您的问题。你的问题是你想做什么，但不是你为什么不能。通常关于StackOverflow的问题会询问一些特定的问题，因此请解释您尝试了什么，并更具体地说明您需要的帮助。
<body>
<div id="products"></div>


<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/app.js"></script>
</body>

<body>
<div id="productDescription">

</div>

<script src="js/app.js"></script>
</body>

[
 {
  "name" : "Asus",
  "model" : "laptopModel",
  "price" : 100000
 },
 {
  "name" : "HP",
  "model" : "laptopModel",
  "price" : 90000
 }
]