Question

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

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

脚本＆amp; Div布局：

Import-Csv : Could not find file 'C:\path\of\current\drive\batch.csv'.
At C:\path\of\current\drive\myscript.ps1:9 char:1
+ Import-Csv $inputobject | select COLUMN1,COLUMN2 | Export-Cs ...
+ ~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : OpenError: (:) [Import-Csv], FileNotFoundException
    + FullyQualifiedErrorId : FileOpenFailure,Microsoft.PowerShell.Commands.ImportCsvCommand

JSON文件的布局

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

Answer 1

尝试调查Knockout，Angular或React等工具。所有这些都提供了很棒的功能，可以根据需要提供更多功能所有（如果内存服务）提供组件的概念，允许复制一些HTML，但其中出现不同的数据;即：你想要什么。

HTML / Ajax - 动态显示数据

1 个答案: