Javascript 如何将数据从json文件加载到引导网格

我正在做我的第一个拼贴项目（简单电子商务平台）

我已经尝试过以下解决方案：

https://stackoverflow.com/questions/37814493/how-to-load-json-data-into-bootstrap-table

它工作得很好，但不令人满意。我的目标是创建包含多行和6列的漂亮数组（加载格式json），如下所示：

有办法吗

产品列表。json:

"products": [
    {
      "id": "1",
      "name": "Book Name 1",
      "category": "Computers",
      "price": "$ 123",
      "image": "img/product-1.png"
    }, {
      "id": "2",
      "name": "Book Name 2",
      "category": ["Science", "Programming"],
      "price": "$ 319",
      "image": "img/product-2.png"
    }
]

<div class="container">
    <div class="title-box-featured">
        <h2>Product List</h2>
    </div>
    <div class="row">
        <div class="col-md-2">
            <a href="" target="blank">Image</a>
            <div class="product-bottom text-center">
                <h3>Name</h3>
                <h4>Price</h4>
            </div>
        </div>
    </div>
</div>

HTML:

"products": [
    {
      "id": "1",
      "name": "Book Name 1",
      "category": "Computers",
      "price": "$ 123",
      "image": "img/product-1.png"
    }, {
      "id": "2",
      "name": "Book Name 2",
      "category": ["Science", "Programming"],
      "price": "$ 319",
      "image": "img/product-2.png"
    }
]

<div class="container">
    <div class="title-box-featured">
        <h2>Product List</h2>
    </div>
    <div class="row">
        <div class="col-md-2">
            <a href="" target="blank">Image</a>
            <div class="product-bottom text-center">
                <h3>Name</h3>
                <h4>Price</h4>
            </div>
        </div>
    </div>
</div>

产品清单
名称
价格

如果您对javascript稍有了解，您可以尝试使用Array.map函数和计数器读取数据。计数器达到6后，插入新行

let products= [
    {
      "id": "1",
      "name": "Book Name 1",
      "category": "Computers",
      "price": "$ 123",
      "image": "img/product-1.png"
    }, {
      "id": "2",
      "name": "Book Name 2",
      "category": ["Science", "Programming"],
      "price": "$ 319",
      "image": "img/product-2.png"
    }
];

然后在页面内：

<div class="container">
    <div class="row">
        <script>
            var counter = 0; 
            propducts.map(product=>{ 
                counter = counter +1;
                if(counter < 6)
                return (<div class="col">{product /*do somthing with your data to style it*/}</div>);
                else
                    {
                        counter = 0;
                        return (<div class="col">{product /*do somthing with your data to style it*/}</div></div><div class="row">);
                    }
            };
        </script>
    </div>
</div>

var计数器=0；
propducts.map（产品=>{
计数器=计数器+1；
如果（计数器<6）
返回（{product/*对数据执行某些操作以设置其样式*/}）；
其他的
{
计数器=0；
返回（{product/*对数据执行某些操作以设置其样式*/}）；
}
};

如果要从JSON文件中检索数据，可以使用“jQuery.getJSON（）”进行检索。只需编写如下调用：

$.getJSON('result.json', function(data) {
     //here data is your retrived json obj, do further processing with it like i have done below
});

最好从外部JSON文件获取数据，否则您可以按以下方式执行：

$（文档）.ready（函数（）{
var乘积=[{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“1”，
“名称”：“书名1”，
“类别”：“计算机”，
“价格”：“$123”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“2”，
“名称”：“书名2”，
“类别”：[“科学”、“编程”]，
“价格”：“$319”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“2”，
“名称”：“书名2”，
“类别”：[“科学”、“编程”]，
“价格”：“$319”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
},
{
“id”：“2”，
“名称”：“书名2”，
“类别”：[“科学”、“编程”]，
“价格”：“$319”，
“图像”：https://static.boredpanda.com/blog/wp-content/uuuploads/tunnel-of-love-ukraine/tunnel-of-love-ukraine-6.jpg"
}
];
var j=0；
var-content=“”；
用于（产品中的var i）{
如果（i%6==0）{
$（“#产品”）。追加（“”）；
j=i；
}
$（“#行”+j）.追加（“+产品[i].name+”
“+产品[i].price+”）；
}
});

您是否尝试过使用表格？是的，谢谢。不幸的是，我在安排方面遇到的最大问题是，只要我可以使用CSS对整个表格进行样式化，我就无法更改加载数据的方式。使用这些方法，我可以在行下方创建产品列表（一行中有一个产品），但我无法在一行中创建6个产品（如所附照片所示）。解决方案可能很简单，但我想不出来。非常感谢！看起来就像我尝试过的那样！谢谢！