如何將本地 json 文件渲染到 HTML 和瀏覽器中

Question

我是 Javascript 的新手，我有問題。 目前我正在做項目，這實際上是我的實踐項目，我正在嘗試制作購物車頁面。 我的問題是 JSON 文件，我不知道如何渲染它（在瀏覽器中的 HTML 中顯示它），我有一些產品的本地 JSON 文件。 這是我的主頁代碼，app.js（JSON 文件的 function 文件在哪里）和 JSON 文件與產品

HTML 文件

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Shopping Cart</title>

  <meta charset="utf-8" />
  <meta name="description" content="cobe" />
  <meta name="author" content="cobe" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../style/style.css" />
</head>

<body>
  <main class="main-wrapper">

    <div class="items">
      <div class="item">
        <div class="image">
          <img src="" alt="" class="img">Image</img>
        </div>
        <h2 class="item-name">Name of item</h2>
        <h3 class="price">Price</h3>
        <button class="button">Add item</button>
      </div>
      <div id="products" class="list"></div>
    </div>
</main>

  <script type="text/javascript" src="../products.json"></script>
  <script type="text/javascript" src="../app.js"></script>

app.js 文件

let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    let response = JSON.parse(xhttp.responseText);
    let products = response.products;

    let output = '';
    for (let i = 0; i < products.length; i++) {
      output += '<li>' + products[i].name + '</li>';
    }
    document.getElementById('products').innerHTML = output;
  }
};
xhttp.open("GET", "products.json", true);
xhttp.send();

和 JSON 文件，稱為 products.json

{
  "products": [
    {
      "id": 1,
      "name": "Eggs",
      "image": "https://d17zv3ray5yxvp.cloudfront.net/variants/W1ymDizfe679XsfX9uP8A5bU/7b27a910a7194c812eacf34700e38dcab3abed02f30837d1dad313c5651bb5fa",
      "price": {
        "amount": 7.99,
        "currency": "Kn",
        "measureUnit": "Kom"
      }
    },
    {
      "id": 2,
      "image": "https://d17zv3ray5yxvp.cloudfront.net/variants/b1qEMnNGbwiwV5cWysofPoqz/7b27a910a7194c812eacf34700e38dcab3abed02f30837d1dad313c5651bb5fa",
      "name": "Milk",
      "price": {
        "amount": 4.99,
        "currency": "Kn",
        "measureUnit": "Kom"
      }
    },
    {
      "id": 3,
      "image": "https://d17zv3ray5yxvp.cloudfront.net/variants/1avpwnxKAEqEpTf1k3VCbBbg/7b27a910a7194c812eacf34700e38dcab3abed02f30837d1dad313c5651bb5fa",
      "name": "Cheese",
      "price": {
        "amount": 44.99,
        "currency": "Kn",
        "measureUnit": "Kg"
      }
    }
  ]
}

所以我的問題是我應該在 HTML 文件中寫什么，這樣我就可以將 JSON 文件中的產品名稱放入我的 div 中，該 div 是在 HTML 文件中聲明的名稱或函數？ 目前我的頁面是空白的，因為我無法解決如何從 JSON 文件中獲取所有內容。

HTML 文件位於views 文件夾中，app.js 和products.json 位於views 文件夾之外。

謝謝！

Answer 1

嘗試使用 function 生成模板並設置innerHTML屬性。

從 API 獲得響應JSON后，您可以使用此populateProducts function。 這將生成模板並更新 DOM。

 var myData = { "products": [ { "id": 1, "name": "Eggs", "image": "https://d17zv3ray5yxvp.cloudfront.net/variants/W1ymDizfe679XsfX9uP8A5bU/7b27a910a7194c812eacf34700e38dcab3abed02f30837d1dad313c5651bb5fa", "price": { "amount": 7.99, "currency": "Kn", "measureUnit": "Kom" } }, { "id": 2, "image": "https://d17zv3ray5yxvp.cloudfront.net/variants/b1qEMnNGbwiwV5cWysofPoqz/7b27a910a7194c812eacf34700e38dcab3abed02f30837d1dad313c5651bb5fa", "name": "Milk", "price": { "amount": 4.99, "currency": "Kn", "measureUnit": "Kom" } }, { "id": 3, "image": "https://d17zv3ray5yxvp.cloudfront.net/variants/1avpwnxKAEqEpTf1k3VCbBbg/7b27a910a7194c812eacf34700e38dcab3abed02f30837d1dad313c5651bb5fa", "name": "Cheese", "price": { "amount": 44.99, "currency": "Kn", "measureUnit": "Kg" } } ] }; function populateProducts() { var template = ''; for(let index = 0; index < myData.products.length; index++) { template += "<div>Name: " + myData.products[index].name + "</div>" + "<div>Image: <img class='my-image' src='" + myData.products[index].image + "' /></div>"+ "<div>Amount: " + myData.products[index].price.amount + "</div>" + "<div>Currency: " + myData.products[index].price.currency + "</div>" + "<div>MeasureUnit: " + myData.products[index].price.measureUnit + "</div>"; } document.getElementById('item-wrapper').innerHTML = template; } populateProducts();

 .my-image { max-width: 50px; }

 <main class="main-wrapper"> <div id="item-wrapper"></div> </main>

Answer 2

如果您能夠使用諸如Handlebars.js之類的模板系統，您可以將 HTML（項目 div）的重復部分轉換為模板，然后用數據填充它。 改編 Handlebars 頁面中的“Getting Started”示例，模板如下所示：

<script id="item-template" type="text/x-handlebars-template">
  {{#each products}}
    <div class="item">
      <div class="image">
        <img src="{{image}}" alt="" class="img">Image</img>
      </div>
      <h2 class="item-name">{{name}}</h2>
      <h3 class="price">{{price.amount}}</h3>
      <button class="button">Add item</button>
    </div>
  {{/each}}
</script>

然后在腳本中注冊模板：

const source = document.getElementById("item-template").innerHTML;
const template = Handlebars.compile(source);

...然后在您的 HTTP 請求中，您可以將數據傳遞給模板，它會返回 HTML 您可以根據需要將其添加到 DOM 中：

const html = template(context);

如何將本地 json 文件渲染到 HTML 和瀏覽器中

問題描述

2 個解決方案

解決方案1
0 已采納 2019-11-20 12:53:35

解決方案2
0 2019-11-20 15:01:04

如何將本地 json 文件渲染到 HTML 和瀏覽器中

問題描述

2 個解決方案

解決方案1 0 已采納 2019-11-20 12:53:35

解決方案2 0 2019-11-20 15:01:04

解決方案1
0 已采納 2019-11-20 12:53:35

解決方案2
0 2019-11-20 15:01:04