HTML/Ajax - 动态显示数据

Question

我正在为一个项目创建一个电子商务网站，这需要从 JSON 文件中读取数据，然后将其与相关信息一起显示在屏幕上。我已经能够将文件链接到我的 HTML 文档并使用控制台，能够列出产品名称等信息。我的问题是如何将这些信息放到网站上并为每个产品创建一个新容器？

我已经为这些产品的显示方式创建了布局，其中包含了一些虚拟数据，并随之创建了一些 CSS。有人可以说明我将如何为 JSON 文件中列出的每个产品创建一个新的购物容器，因此 JSON 文件中的每个产品都会如下面的屏幕截图所示生成？

脚本和 div 布局：

    <section class="section-offer js--section-offer" id="offer">
        <div class="row">
            <h2>What We Offer.</h2>
            <p class="long-copy">
            </p>
            <script>
                $.ajax({
                    url: 'products.json',
                    dataType: 'json',
                    type: 'get',
                    cache: false,
                    success: function(data) {
                        $(data.products).each(function(index,value) { //Grabs every single item inside of the json file
                            console.log(value.name);
                        });
                    }
                });
            </script>
        </div>
        <div class="shopping-container">
            <div>
                <h4>Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - UK-Layout</h4>
                <p class="shopping-container-desc">Logitech 920-008017 G910 Orion Spectrum RGB Mechanical Gaming Keyboard - Black.</p>
            </div>
            <div class="shopping-container-img">
                <img src="images/02.jpg">
            </div>
            <div>
                <a href="basket.html" class="btn btn-full">&pound;199.99</a>
            </div>
        </div>
    </section>

JSON 文件的布局

{
  "products" : [
    {
      "id" : "0",
      "name" : "Logitech G910 Orion Spectrum RGB Mechanical Gaming Keyboard - UK-Layout",
      "price" : "119.99",
      "category" : "0",
      "description" : "Logitech 920-008017 G910 Orion Spectrum RGB Mechanical Gaming Keyboard - Black.",
      "images" : [
        {
          "id" : "0",
          "src" : "images/00.jpg"
        },
        {
          "id" : "1",
          "src" : "images/01.jpg"
        },
        {
          "id" : "2",
          "src" : "images/02.jpg"
        }
      ]
    },

Answer 1

尝试调查Knockout、Angular 或React 等工具。所有这些都提供了强大的功能，可以随心所欲地做，还有更多。所有（如果没记错的话）都提供了组件的概念，它允许复制一些 HTML，但其中出现不同的数据；即：你想要什么。