Загрузить данные c JSON на одной странице, щелкнув элемент на другой странице - PullRequest
Новая
       3

Загрузить данные c JSON на одной странице, щелкнув элемент на другой странице

0 голосов
/ 04 марта 2020

Я хочу загрузить указанные c данные с JSON на указанную c HTML страницу, нажав кнопку на другой странице HTML, используя только jQuery и обычный JS. Пример:

1-я HTML страница, сначала мне нужно отобразить все продукты из JSON в элементе с id = "products": 

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


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

2-я HTML страница, когда щелкнув по любому продукту на 1-й HTML странице, технические характеристики этого продукта должны отображаться на 2-й 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.

1 Ответ

1 голос
/ 04 марта 2020

Из-за безопасности браузера, бла-бла, вы можете читать из файла 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"));
...