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

【问题标题】：Load specific JSON data in one page by clicking an element on another page通过单击另一页面上的元素在一个页面中加载特定的 JSON 数据
【发布时间】：2020-06-16 08:12:31
【问题描述】：

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

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

<body>
<div id="products"></div>


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

第二个 HTML 页面，当点击第一个 HTML 页面上的任何产品时，该产品的规格需要显示在第二个 HTML 页面上。

<body>
<div id="productDescription">

</div>

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

这是示例 JSON 文件：

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

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

【问题讨论】：

请编辑您的问题。您的问题说明了您想要做什么，而不是为什么您不能。 StackOverflow 上的问题通常会问一些具体的问题，因此请说明您尝试过的内容并更具体地说明您需要的帮助。

标签： javascript jquery html json frontend

【解决方案1】：

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

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

const getPage = whichPage => {
  return fetch("path/to/yourfile.json")
  .then(response => response.json())
  .then(data => buildPage(whichPage, data))
  .catch(error => console.error(error));
};

const buildPage = (whichPage, products) => {
  if (whichPage === "products") {
    // do something with products to display a list of products
    products.forEach(p => console.log(p));
  } else {
    let product = products.find(p => p.name === whichPage);
    if (product) {
      // do something with product to display details
      console.log(product);
    } else {
      console.error("product not found [" + whichPage + "]");
    }
  }
};

getPage("products");

// or
// getPage("Asus");

// or
// getPage("products").then(() => getPage("Asus"));

【讨论】：