如何将本地 json 文件渲染成 HTML 和浏览器答案

【问题标题】：How to render local json file into HTML and browser如何将本地 json 文件渲染成 HTML 和浏览器
【发布时间】：2019-11-20 12:41:24
【问题描述】：

我是 Javascript 的新手，但我遇到了问题。目前我正在做项目，这实际上是我的实践项目，我正在尝试制作购物车页面。我的问题是 JSON 文件，我不知道如何渲染它（在浏览器的 HTML 中显示），我有一些产品的本地 JSON 文件。这是我的主页代码，app.js（我的 JSON 文件函数在哪里）和带有产品的 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();

和名为 products.json 的 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 文件中声明的名称，还是我缺少更多的 JS 函数？目前我的页面是空白的，因为我无法解决如何从 JSON 文件中获取所有内容。

HTML 文件在views 文件夹中，app.js 和products.json 在views 文件夹之外。

谢谢！

【问题讨论】：

标签： javascript html json

【解决方案1】：

尝试使用函数生成模板并设置innerHTML属性。

从 API 获得响应 JSON 后，您可以使用此 populateProducts 函数。这将生成模板并更新 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>

【讨论】：

【解决方案2】：

如果您能够使用模板系统，例如Handlebars.js，您可以将 HTML 的重复部分（项目 div）转换为模板，然后用数据填充它。改编 Handlebars 页面中的“入门”示例，模板将如下所示：

<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);

【讨论】：